https://themidnight.wiki/index.php?action=history&feed=atom&title=Template%3AAudioTest
Template:AudioTest - Revision history
2026-05-13T00:17:00Z
Revision history for this page on the wiki
MediaWiki 1.41.1
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=7827&oldid=prev
Timothy: Replaced content with "<html> <div class="player"> <audio> <source src="https://themidnight.wiki/images/6/61/Dance_with_somebody_v5_guide_vox_60_.mp3" type="audio/mpeg"> </audio> </div> <div class="player"> <audio> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"> </audio> </div> </html> {{#widget:AudioPlayer|ogg=/images/6/61/Dance_with_somebody_v5_guide_vox_60.ogg|mp3=/images/6/61/Dance_with_somebody_v5_guide_vox_60_..."
2023-06-13T02:33:08Z
<p>Replaced content with "<html> <div class="player"> <audio> <source src="https://themidnight.wiki/images/6/61/Dance_with_somebody_v5_guide_vox_60_.mp3" type="audio/mpeg"> </audio> </div> <div class="player"> <audio> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"> </audio> </div> </html> {{#widget:AudioPlayer|ogg=/images/6/61/Dance_with_somebody_v5_guide_vox_60.ogg|mp3=/images/6/61/Dance_with_somebody_v5_guide_vox_60_..."</p>
<a href="https://themidnight.wiki/index.php?title=Template:AudioTest&diff=7827&oldid=7826">Show changes</a>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=7826&oldid=prev
Timothy at 02:32, 13 June 2023
2023-06-13T02:32:24Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:32, 12 June 2023</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><template></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <style></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <style></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> button {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> button {</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l411">Line 411:</td>
<td colspan="2" class="diff-lineno">Line 410:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>customElements.define('audio-player', AudioPlayer);</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>customElements.define('audio-player', AudioPlayer);</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></script></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></script></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> </template></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <audio-player data-src="https://assets.codepen.io/4358584/Anitek_-_Komorebi.mp3"></audio-player></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <audio-player data-src="https://assets.codepen.io/4358584/Anitek_-_Komorebi.mp3"></audio-player></div></td></tr>
</table>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=7825&oldid=prev
Timothy at 02:29, 13 June 2023
2023-06-13T02:29:55Z
<p></p>
<a href="https://themidnight.wiki/index.php?title=Template:AudioTest&diff=7825&oldid=4506">Show changes</a>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=4506&oldid=prev
Timothy at 02:59, 25 April 2022
2022-04-25T02:59:21Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:59, 24 April 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l11">Line 11:</td>
<td colspan="2" class="diff-lineno">Line 11:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">{{#widget:AudioPlayer|ogg=/images/6/61/Dance_with_somebody_v5_guide_vox_60.ogg|mp3=/images/6/61/Dance_with_somebody_v5_guide_vox_60_.mp3}}</ins></div></td></tr>
</table>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=4504&oldid=prev
Timothy at 02:33, 25 April 2022
2022-04-25T02:33:21Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:33, 24 April 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><div class="<del style="font-weight: bold; text-decoration: none;">song1 </del>player"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><div class="player"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <audio></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <audio></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/6/61/Dance_with_somebody_v5_guide_vox_60_.mp3" type="audio/mpeg"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/6/61/Dance_with_somebody_v5_guide_vox_60_.mp3" type="audio/mpeg"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </audio></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </audio></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><div class="<del style="font-weight: bold; text-decoration: none;">song2 </del>player"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><div class="player"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <audio></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <audio></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"></div></td></tr>
</table>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=4503&oldid=prev
Timothy at 02:32, 25 April 2022
2022-04-25T02:32:20Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:32, 24 April 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><div></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><div <ins style="font-weight: bold; text-decoration: none;">class="song1 player"</ins>></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <audio <del style="font-weight: bold; text-decoration: none;">class="player"</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <audio></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/6/61/Dance_with_somebody_v5_guide_vox_60_.mp3" type="audio/mpeg"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/6/61/Dance_with_somebody_v5_guide_vox_60_.mp3" type="audio/mpeg"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </audio></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </audio></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> </del><<del style="font-weight: bold; text-decoration: none;">audio </del>class="player"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">div </ins>class="<ins style="font-weight: bold; text-decoration: none;">song2 </ins>player"<ins style="font-weight: bold; text-decoration: none;">></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> <audio</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </audio></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </audio></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td></tr>
</table>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=4500&oldid=prev
Timothy at 02:27, 25 April 2022
2022-04-25T02:27:29Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:27, 24 April 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><div class="<del style="font-weight: bold; text-decoration: none;">gap-example</del>"></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><div<ins style="font-weight: bold; text-decoration: none;">></ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <audio></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> <audio </ins>class="<ins style="font-weight: bold; text-decoration: none;">player</ins>"></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> <source src="https://themidnight.wiki/images/6/61/Dance_with_somebody_v5_guide_vox_60_.mp3" type="audio/mpeg"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> </audio></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <audio <ins style="font-weight: bold; text-decoration: none;">class="player"</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </audio></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> </audio></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></div></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><script></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">new GreenAudioPlayer('.gap-example');</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></script></del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td></tr>
</table>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=4498&oldid=prev
Timothy at 02:19, 25 April 2022
2022-04-25T02:19:03Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:19, 24 April 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><html></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><div class="gap-example"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> <audio></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> <source src="https://themidnight.wiki/images/b/be/Lost_boy_v2_80_.mp3" type="audio/mpeg"></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> </audio></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></div></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><script></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">new GreenAudioPlayer('.gap-example');</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></script></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></html></div></td></tr>
</table>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=4497&oldid=prev
Timothy: Replaced content with "<html> </html>"
2022-04-25T02:12:23Z
<p>Replaced content with "<html> </html>"</p>
<a href="https://themidnight.wiki/index.php?title=Template:AudioTest&diff=4497&oldid=4496">Show changes</a>
Timothy
https://themidnight.wiki/index.php?title=Template:AudioTest&diff=4496&oldid=prev
Timothy: Created page with "<html> <head> <style> body { margin: 0; } .holder { display: flex; flex-direction: column; align-items: center; .get-it-on-github { margin-top: 24px; margin-bottom: 24px; font-family: 'Roboto'; color: #55606E; } } .audio.green-audio-player { width: 400px; min-width: 300px; height: 56px; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .07); display: flex; justify-content: space-between; align-items: center; padding-left: 24px; pad..."
2022-04-25T02:10:56Z
<p>Created page with "<html> <head> <style> body { margin: 0; } .holder { display: flex; flex-direction: column; align-items: center; .get-it-on-github { margin-top: 24px; margin-bottom: 24px; font-family: 'Roboto'; color: #55606E; } } .audio.green-audio-player { width: 400px; min-width: 300px; height: 56px; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .07); display: flex; justify-content: space-between; align-items: center; padding-left: 24px; pad..."</p>
<p><b>New page</b></p><div><html><br />
<head><br />
<style><br />
body {<br />
margin: 0;<br />
}<br />
<br />
.holder {<br />
display: flex;<br />
flex-direction: column;<br />
align-items: center;<br />
<br />
.get-it-on-github {<br />
margin-top: 24px;<br />
margin-bottom: 24px;<br />
font-family: 'Roboto';<br />
color: #55606E;<br />
}<br />
}<br />
<br />
.audio.green-audio-player {<br />
width: 400px;<br />
min-width: 300px;<br />
height: 56px;<br />
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .07);<br />
display: flex;<br />
justify-content: space-between;<br />
align-items: center;<br />
padding-left: 24px;<br />
padding-right: 24px;<br />
border-radius: 4px;<br />
user-select: none;<br />
-webkit-user-select: none;<br />
background-color: #fff;<br />
.play-pause-btn {<br />
display: none;<br />
cursor: pointer;<br />
}<br />
.spinner {<br />
width: 18px;<br />
height: 18px;<br />
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/loading.png);<br />
background-size: cover;<br />
background-repeat: no-repeat;<br />
animation: spin 0.4s linear infinite;<br />
}<br />
.slider {<br />
flex-grow: 1;<br />
background-color: #D8D8D8;<br />
cursor: pointer;<br />
position: relative;<br />
.progress {<br />
background-color: #44BFA3;<br />
border-radius: inherit;<br />
position: absolute;<br />
pointer-events: none;<br />
.pin {<br />
height: 16px;<br />
width: 16px;<br />
border-radius: 8px;<br />
background-color: #44BFA3;<br />
position: absolute;<br />
pointer-events: all;<br />
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.32);<br />
}<br />
}<br />
}<br />
.controls {<br />
font-family: 'Roboto', sans-serif;<br />
font-size: 16px;<br />
line-height: 18px;<br />
color: #55606E;<br />
display: flex;<br />
flex-grow: 1;<br />
justify-content: space-between;<br />
align-items: center;<br />
margin-left: 24px;<br />
margin-right: 24px;<br />
.slider {<br />
margin-left: 16px;<br />
margin-right: 16px;<br />
border-radius: 2px;<br />
height: 4px;<br />
.progress { <br />
width: 0;<br />
height: 100%;<br />
.pin {<br />
right: -8px;<br />
top: -6px;<br />
}<br />
}<br />
}<br />
span {<br />
cursor: default;<br />
}<br />
}<br />
.volume {<br />
position: relative;<br />
.volume-btn {<br />
cursor: pointer;<br />
&.open path {<br />
fill: #44BFA3;<br />
}<br />
}<br />
.volume-controls {<br />
width: 30px;<br />
height: 135px;<br />
background-color: rgba(0, 0, 0, 0.62);<br />
border-radius: 7px;<br />
position: absolute;<br />
left: -3px;<br />
bottom: 52px;<br />
flex-direction: column;<br />
align-items: center;<br />
display: flex;<br />
&.hidden {<br />
display: none;<br />
}<br />
.slider {<br />
margin-top: 12px;<br />
margin-bottom: 12px;<br />
width: 6px;<br />
border-radius: 3px;<br />
.progress {<br />
bottom: 0;<br />
height: 100%;<br />
width: 6px;<br />
.pin {<br />
left: -5px;<br />
top: -8px;<br />
}<br />
}<br />
}<br />
} <br />
}<br />
}<br />
svg, img {<br />
display: block;<br />
}<br />
<br />
html, body {<br />
height: 100%;<br />
}<br />
<br />
body {<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
background: #F8FFAE;<br />
background: -webkit-linear-gradient(-65deg, #43C6AC, #F8FFAE);<br />
background: linear-gradient(-65deg, #43C6AC, #F8FFAE);<br />
-webkit-font-smoothing: antialiased;<br />
-moz-osx-font-smoothing: grayscale;<br />
}<br />
<br />
@keyframes spin {<br />
from {<br />
transform: rotateZ(0);<br />
}<br />
to {<br />
transform: rotateZ(1turn);<br />
}<br />
}<br />
</style><br />
</head><br />
<div class="holder"><br />
<div class="audio green-audio-player"><br />
<div class="loading"><br />
<div class="spinner"></div><br />
</div><br />
<div class="play-pause-btn"> <br />
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24"><br />
<path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon" id="playPause"/><br />
</svg><br />
</div><br />
<br />
<div class="controls"><br />
<span class="current-time">0:00</span><br />
<div class="slider" data-direction="horizontal"><br />
<div class="progress"><br />
<div class="pin" id="progress-pin" data-method="rewind"></div><br />
</div><br />
</div><br />
<span class="total-time">0:00</span><br />
</div><br />
<br />
<div class="volume"><br />
<div class="volume-btn"><br />
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><br />
<path fill="#566574" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" id="speaker"/><br />
</svg><br />
</div><br />
<div class="volume-controls hidden"><br />
<div class="slider" data-direction="vertical"><br />
<div class="progress"><br />
<div class="pin" id="volume-pin" data-method="changeVolume"></div><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
<audio crossorigin><br />
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3" type="audio/mpeg"><br />
</audio><br />
</div><br />
<br />
<a class="get-it-on-github" href="https://github.com/greghub/green-audio-player" target="_blank">Get it on Github</a><br />
</div><br />
<script><br />
var audioPlayer = document.querySelector('.green-audio-player');<br />
var playPause = audioPlayer.querySelector('#playPause');<br />
var playpauseBtn = audioPlayer.querySelector('.play-pause-btn');<br />
var loading = audioPlayer.querySelector('.loading');<br />
var progress = audioPlayer.querySelector('.progress');<br />
var sliders = audioPlayer.querySelectorAll('.slider');<br />
var volumeBtn = audioPlayer.querySelector('.volume-btn');<br />
var volumeControls = audioPlayer.querySelector('.volume-controls');<br />
var volumeProgress = volumeControls.querySelector('.slider .progress');<br />
var player = audioPlayer.querySelector('audio');<br />
var currentTime = audioPlayer.querySelector('.current-time');<br />
var totalTime = audioPlayer.querySelector('.total-time');<br />
var speaker = audioPlayer.querySelector('#speaker');<br />
<br />
var draggableClasses = ['pin'];<br />
var currentlyDragged = null;<br />
<br />
window.addEventListener('mousedown', function(event) {<br />
<br />
if(!isDraggable(event.target)) return false;<br />
<br />
currentlyDragged = event.target;<br />
let handleMethod = currentlyDragged.dataset.method;<br />
<br />
this.addEventListener('mousemove', window[handleMethod], false);<br />
<br />
window.addEventListener('mouseup', () => {<br />
currentlyDragged = false;<br />
window.removeEventListener('mousemove', window[handleMethod], false);<br />
}, false); <br />
});<br />
<br />
playpauseBtn.addEventListener('click', togglePlay);<br />
player.addEventListener('timeupdate', updateProgress);<br />
player.addEventListener('volumechange', updateVolume);<br />
player.addEventListener('loadedmetadata', () => {<br />
totalTime.textContent = formatTime(player.duration);<br />
});<br />
player.addEventListener('canplay', makePlay);<br />
player.addEventListener('ended', function(){<br />
playPause.attributes.d.value = "M18 12L0 24V0";<br />
player.currentTime = 0;<br />
});<br />
<br />
volumeBtn.addEventListener('click', () => {<br />
volumeBtn.classList.toggle('open');<br />
volumeControls.classList.toggle('hidden');<br />
})<br />
<br />
window.addEventListener('resize', directionAware);<br />
<br />
sliders.forEach(slider => {<br />
let pin = slider.querySelector('.pin');<br />
slider.addEventListener('click', window[pin.dataset.method]);<br />
});<br />
<br />
directionAware();<br />
<br />
function isDraggable(el) {<br />
let canDrag = false;<br />
let classes = Array.from(el.classList);<br />
draggableClasses.forEach(draggable => {<br />
if(classes.indexOf(draggable) !== -1)<br />
canDrag = true;<br />
})<br />
return canDrag;<br />
}<br />
<br />
function inRange(event) {<br />
let rangeBox = getRangeBox(event);<br />
let rect = rangeBox.getBoundingClientRect();<br />
let direction = rangeBox.dataset.direction;<br />
if(direction == 'horizontal') {<br />
var min = rangeBox.offsetLeft;<br />
var max = min + rangeBox.offsetWidth; <br />
if(event.clientX < min || event.clientX > max) return false;<br />
} else {<br />
var min = rect.top;<br />
var max = min + rangeBox.offsetHeight; <br />
if(event.clientY < min || event.clientY > max) return false; <br />
}<br />
return true;<br />
}<br />
<br />
function updateProgress() {<br />
var current = player.currentTime;<br />
var percent = (current / player.duration) * 100;<br />
progress.style.width = percent + '%';<br />
<br />
currentTime.textContent = formatTime(current);<br />
}<br />
<br />
function updateVolume() {<br />
volumeProgress.style.height = player.volume * 100 + '%';<br />
if(player.volume >= 0.5) {<br />
speaker.attributes.d.value = 'M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z'; <br />
} else if(player.volume < 0.5 && player.volume > 0.05) {<br />
speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z';<br />
} else if(player.volume <= 0.05) {<br />
speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667';<br />
}<br />
}<br />
<br />
function getRangeBox(event) {<br />
let rangeBox = event.target;<br />
let el = currentlyDragged;<br />
if(event.type == 'click' && isDraggable(event.target)) {<br />
rangeBox = event.target.parentElement.parentElement;<br />
}<br />
if(event.type == 'mousemove') {<br />
rangeBox = el.parentElement.parentElement;<br />
}<br />
return rangeBox;<br />
}<br />
<br />
function getCoefficient(event) {<br />
let slider = getRangeBox(event);<br />
let rect = slider.getBoundingClientRect();<br />
let K = 0;<br />
if(slider.dataset.direction == 'horizontal') {<br />
<br />
let offsetX = event.clientX - slider.offsetLeft;<br />
let width = slider.clientWidth;<br />
K = offsetX / width; <br />
<br />
} else if(slider.dataset.direction == 'vertical') {<br />
<br />
let height = slider.clientHeight;<br />
var offsetY = event.clientY - rect.top;<br />
K = 1 - offsetY / height;<br />
<br />
}<br />
return K;<br />
}<br />
<br />
function rewind(event) {<br />
if(inRange(event)) {<br />
player.currentTime = player.duration * getCoefficient(event);<br />
}<br />
}<br />
<br />
function changeVolume(event) {<br />
if(inRange(event)) {<br />
player.volume = getCoefficient(event);<br />
}<br />
}<br />
<br />
function formatTime(time) {<br />
var min = Math.floor(time / 60);<br />
var sec = Math.floor(time % 60);<br />
return min + ':' + ((sec<10) ? ('0' + sec) : sec);<br />
}<br />
<br />
function togglePlay() {<br />
if(player.paused) {<br />
playPause.attributes.d.value = "M0 0h6v24H0zM12 0h6v24h-6z";<br />
player.play();<br />
} else {<br />
playPause.attributes.d.value = "M18 12L0 24V0";<br />
player.pause();<br />
} <br />
}<br />
<br />
function makePlay() {<br />
playpauseBtn.style.display = 'block';<br />
loading.style.display = 'none';<br />
}<br />
<br />
function directionAware() {<br />
if(window.innerHeight < 250) {<br />
volumeControls.style.bottom = '-54px';<br />
volumeControls.style.left = '54px';<br />
} else if(audioPlayer.offsetTop < 154) {<br />
volumeControls.style.bottom = '-164px';<br />
volumeControls.style.left = '-3px';<br />
} else {<br />
volumeControls.style.bottom = '52px';<br />
volumeControls.style.left = '-3px';<br />
}<br />
}<br />
</script><br />
</html></div>
Timothy