Template:Audio: Difference between revisions
add file link
PetraMagna (talk | contribs) mNo edit summary |
PetraMagna (talk | contribs) (add file link) |
||
(16 intermediate revisions by the same user not shown) | |||
Line 1:
<includeonly><templatestyles src="Audio/style.css"/><div class="audio-player" style="{{{container-style|}}}" data-src="{{filepath:{{{src|}}}}}" data-group="{{{group|
{{#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="play-container">
<div class="toggle-play {{#ifeq:{{{pause-button|}}}|true|pause|play}}"></div>
</div><!--
<div class="current">
<div class="divider">
<div class="length"></div>
</div>}}<!--
<div class="volume-button">
<div class="volume icon-volume-medium"></div>
Line 18:
<div class="volume-percentage"></div>
</div>
</div>}}
</div>
</div></includeonly><noinclude>
Adapted from [https://codepen.io/EmNudge/pen/rRbLJQ CodePen] with [https://blog.codepen.io/documentation/licensing/ MIT license].
{{Audio|src=ClearMorning Short.ogg}}▼
▲{{Audio|src=ClearMorning Short.ogg|group=BGM|volume=0.25}}
{{Audio|src=Theme 158 Intro.ogg|group=BGM|volume=0.25}}
{{Audio|src=Theme 59 Short.ogg|group=BGM|volume=0.25|loop=true|loop-start=53.333|loop-end=74.666}}
{{Audio/small|src=AMB Rain.ogg|name=sound effect of rain}}
{{Audio|src=AMB Helicopter.ogg}}
{{Audio/pause|group=BGM|name=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.
</noinclude>
|