Template:Audio: Difference between revisions

← Older edit

Template:Audio (edit)

Revision as of 03:59, 2 July 2024

1,758 bytes added , 4 days ago

add file link

VisualWikitext

PetraMagna

Autopatrolled users, Rollbackers, Administrators

19,751

edits

Revision as of 18:05, 8 January 2024 (edit) PetraMagna (talk \| contribs) (test)		Latest revision as of 03:59, 2 July 2024 (edit) (undo) PetraMagna (talk \| contribs) (add file link)
(22 intermediate revisions by the same user not shown)
Line 1: <includeonly><templatestyles src="Audio/style.css"/><div class="audio-~~button~~player" style="{{{container-style\|}}}" data-src="{{filepath:{{{src\|}}}}}" data-group="{{{group\|~~concurrent~~}}}" data-volume="{{{volume\|1}}}" data-loop="{{{loop\|false}}}" data-loop-start="{{{loop-start\|0}}}" data-loop-end="{{{loop-end\|0}}}" ~~style~~data-pause-button="~~border: 1px solid black; border~~{{{pause-~~radius: 5px; display: inline; padding: 3px~~button\|}}}"~~>Audio start</div></includeonly><noinclude~~> {{#if:{{{no-progress\|}}}\|\|<div class="timeline"><div class="progress"></div></div>}} {{Audio\|src=BGM TellYourWorld Short.ogg}}▼ <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><!-- -->{{#if:{{{no-time\|}}}\|\|<div class="time"> <div class="current">Loading...</div> <div class="divider"></div> <div class="length"></div> </div>}}<!-- -->{{#if:{{{no-name\|}}}\|\|<div class="name">{{#if:{{{src\|}}}\|[[:File:{{{src\|}}}\|{{{name\|{{{src\|}}}}}}]]\|{{{name\|{{{src\|}}}}}}}}</div>}}<!-- -->{{#if:{{{no-volume\|}}}\|\|<div class="volume-container"> <div class="volume-button"> <div class="volume icon-volume-medium"></div> </div> <div class="volume-slider"> <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\|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=~~BGM~~AMB ~~TellYourWorld Short~~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. ~~Will grab a better audio interface elsewhere.~~ </noinclude>