Template:Audio: Difference between revisions

From Blue Archive Wiki
Jump to navigation Jump to search
Content added Content deleted
mNo edit summary
(add file link)
 
Line 1: Line 1:
<includeonly><templatestyles src="Audio/style.css"/><div class="audio-player" style="{{{container-style|}}}" data-src="{{filepath:{{{src|}}}}}" data-file-page="{{{src|}}}" data-group="{{{group|}}}" data-volume="{{{volume|1}}}" data-loop="{{{loop|false}}}" data-loop-start="{{{loop-start|0}}}" data-loop-end="{{{loop-end|0}}}" data-pause-button="{{{pause-button|}}}">
<includeonly><templatestyles src="Audio/style.css"/><div class="audio-player" style="{{{container-style|}}}" data-src="{{filepath:{{{src|}}}}}" data-group="{{{group|}}}" data-volume="{{{volume|1}}}" data-loop="{{{loop|false}}}" data-loop-start="{{{loop-start|0}}}" data-loop-end="{{{loop-end|0}}}" data-pause-button="{{{pause-button|}}}">
{{#if:{{{no-progress|}}}||<div class="timeline"><div class="progress"></div></div>}}
{{#if:{{{no-progress|}}}||<div class="timeline"><div class="progress"></div></div>}}
<div class="controls" style="{{{controls-style|{{#if:{{{no-progress|}}}|padding-top:20px|}}}}}">
<div class="controls" style="{{{controls-style|{{#if:{{{no-progress|}}}|padding-top:20px|}}}}}">
Line 10: Line 10:
<div class="length"></div>
<div class="length"></div>
</div>}}<!--
</div>}}<!--
-->{{#if:{{{no-name|}}}||<div class="name">{{{name|{{{src|}}}}}}</div>}}<!--
-->{{#if:{{{no-name|}}}||<div class="name">{{#if:{{{src|}}}|[[:File:{{{src|}}}|{{{name|{{{src|}}}}}}]]|{{{name|{{{src|}}}}}}}}</div>}}<!--
-->{{#if:{{{no-volume|}}}||<div class="volume-container">
-->{{#if:{{{no-volume|}}}||<div class="volume-container">
<div class="volume-button">
<div class="volume-button">
Line 34: Line 34:
#Allow custom styles (especially transform scale). Maybe allow custom class as well?
#Allow custom styles (especially transform scale). Maybe allow custom class as well?
#Style tweaks.
#Style tweaks.
#Link to corresponding File page.
#Lazy updates to progress bar and time: do not update when audio is paused or not started. <- sort of done: only overhead is a check against the previous playtime
#Lazy updates to progress bar and time: do not update when audio is paused or not started. <- sort of done: only overhead is a check against the previous playtime
#Lazy loading. Especially helpful for pages with hundreds of audio files. <- not urgent: this reduces latency anyway
#Lazy loading. Especially helpful for pages with hundreds of audio files. <- not urgent: this reduces latency anyway

Latest revision as of 03:59, 2 July 2024

Adapted from CodePen with MIT license.

Loading...
Loading...
Loading...
BGM pauses
  1. Allow custom styles (especially transform scale). Maybe allow custom class as well?
  2. Style tweaks.
  3. Lazy updates to progress bar and time: do not update when audio is paused or not started. <- sort of done: only overhead is a check against the previous playtime
  4. Lazy loading. Especially helpful for pages with hundreds of audio files. <- not urgent: this reduces latency anyway
  5. Draggable progress bar and volume control.
  6. Mobile compatibility test.