Template:Audio: Difference between revisions

Content added Content deleted

Inline

Revision as of 09:37, 10 January 2024

Adapted from CodePen with MIT license.

Loading...

ClearMorning Short.ogg

Loading...

Theme 158 Intro.ogg

Loading...

Theme 59 Short.ogg

AMB Rain.ogg

Loading...

AMB Helicopter.ogg

Allow hiding the progress bar. Currently it breaks the layout.
Allow custom styles (especially transform scale). Maybe allow custom class as well?
Style tweaks.
Pause BGM button support: either have it as a part of the audio template or put it in the story js.

@@ Line 1: / Line 1: @@
-<includeonly><templatestyles src="Audio/style.css"/><div class="audio-player" style="width:{{{width|100%}}};height:{{{height|40px}}}" 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}}}">
   {{#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:15px|}}}}}">
     <div class="play-container">
       <div class="toggle-play play"></div>
@@ 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=AMB Rain.ogg|no-time=true|no-volume=true|width=120px}}
+{{Audio|src=AMB Rain.ogg|no-time=true|no-volume=true|no-progress=true|container-style=width:120px;height:30px;}}
 {{Audio|src=AMB Helicopter.ogg}}