Template:Audio: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
PetraMagna (talk | contribs) mNo edit summary |
PetraMagna (talk | contribs) add file link |
||
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<includeonly><templatestyles src="Audio/style.css"/><div class="audio-player" style=" |
<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"> |
<div class="controls" style="{{{controls-style|{{#if:{{{no-progress|}}}|padding-top:20px|}}}}}"> |
||
<div class="play-container"> |
<div class="play-container"> |
||
<div class="toggle-play play"></div> |
<div class="toggle-play {{#ifeq:{{{pause-button|}}}|true|pause|play}}"></div> |
||
</div><!-- |
</div><!-- |
||
-->{{#if:{{{no-time|}}}||<div class="time"> |
-->{{#if:{{{no-time|}}}||<div class="time"> |
||
Line 10: | Line 10: | ||
<div class="length"></div> |
<div class="length"></div> |
||
</div>}}<!-- |
</div>}}<!-- |
||
-->{{#if:{{{no-name|}}}||<div class="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 27: | Line 27: | ||
{{Audio|src=Theme 59 Short.ogg|group=BGM|volume=0.25|loop=true|loop-start=53.333|loop-end=74.666}} |
{{Audio|src=Theme 59 Short.ogg|group=BGM|volume=0.25|loop=true|loop-start=53.333|loop-end=74.666}} |
||
{{Audio|src=AMB Rain.ogg| |
{{Audio/small|src=AMB Rain.ogg|name=sound effect of rain}} |
||
{{Audio|src=AMB Helicopter.ogg}} |
{{Audio|src=AMB Helicopter.ogg}} |
||
{{Audio/pause|group=BGM|name=BGM pauses}} |
|||
#Allow hiding the progress bar. Currently it breaks the layout. |
|||
#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. |
||
#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 |
|||
#Draggable progress bar and volume control. |
|||
#Mobile compatibility test. |
|||
</noinclude> |
</noinclude> |
Latest revision as of 03:59, 2 July 2024
Adapted from CodePen with MIT license.
BGM pauses
- Allow custom styles (especially transform scale). Maybe allow custom class as well?
- Style tweaks.
- 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
- Draggable progress bar and volume control.
- Mobile compatibility test.