Template:Audio: Difference between revisions

Content added Content deleted

VisualWikitext

Inline

Latest revision as of 03:59, 2 July 2024

Adapted from CodePen with MIT license.

Loading...

ClearMorning Short.ogg

Loading...

Loading...

Loading...

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.

@@ Line 1: / Line 1: @@
-<includeonly><templatestyles src="Audio/style.css"/><div class="audio-player" 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}}}">
+<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|}}}">
-  <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="toggle-play play"></div>
+      <div class="toggle-play {{#ifeq:{{{pause-button|}}}|true|pause|play}}"></div>
-    </div>
+    </div><!--
-    <div class="time">
+ -->{{#if:{{{no-time|}}}||<div class="time">
-      <div class="current">0:00</div>
+      <div class="current">Loading...</div>
-      <div class="divider">/</div>
+      <div class="divider"></div>
       <div class="length"></div>
-    </div>
+    </div>}}<!--
-    <div class="name">{{{src|}}}</div>
+ -->{{#if:{{{no-name|}}}||<div class="name">{{#if:{{{src|}}}|[[:File:{{{src|}}}|{{{name|{{{src|}}}}}}]]|{{{name|{{{src|}}}}}}}}</div>}}<!--
-    <div class="volume-container">
+ -->{{#if:{{{no-volume|}}}||<div class="volume-container">
       <div class="volume-button">
         <div class="volume icon-volume-medium"></div>
@@ Line 18: / Line 18: @@
         <div class="volume-percentage"></div>
       </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}}
+{{Audio|src=ClearMorning Short.ogg|group=BGM|volume=0.25}}
-{{Audio|src=Theme 158 Intro.ogg|group=BGM}}
+{{Audio|src=Theme 158 Intro.ogg|group=BGM|volume=0.25}}
-{{Audio|src=Theme 34 Short.ogg|group=BGM}}
+{{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/pause|group=BGM|name=BGM pauses}}
-#Grab an audio interface (  ). Allow custom styles.
-#Deal with parameters: multiple audio groups, initial volume, and looping.
+#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>

Template:Audio: Difference between revisions

Latest revision as of 03:59, 2 July 2024

Navigation menu

Search