https://www.youtube.com/watch?v=7unZ0ZE3ZD0 Trampsta - Deep Down Low (Music Video) #DJT

KNOW-HOW

SKI Prezes, wiceprezes i skarbnik. https://www.ski.org.pl #SKI

https://www.youtube.com/watch?v=eV4wmLbRKiM Cloud7 - Wonderland (Cartoon Video) #DJFOX

Example script code for toogle on and off music. <script type="text/javascript"> var myAudio = document.getElementById("myAudio"); var isPlaying = true; function togglePlay() { isPlaying ? myAudio.pause() : myAudio.play(); }; myAudio.onplaying = function() { isPlaying = true; }; myAudio.onpause = function() { isPlaying = false; }; </script>

Example DIV for that: <div class="checkbox-wrapper-8" style="display: flex; float: right;"> <input class="tgl tgl-skewed" id="cb3-8" type="checkbox" onclick="togglePlay();vibrate();"/> <label class="tgl-btn" data-tg-off="ON" data-tg-on="OFF" for="cb3-8"></label> </div>

Example style for button: <style> .checkbox-wrapper-8 .tgl { display: none; } .checkbox-wrapper-8 .tgl, .checkbox-wrapper-8 .tgl:after, .checkbox-wrapper-8 .tgl:before, .checkbox-wrapper-8 .tgl *, .checkbox-wrapper-8 .tgl *:after, .checkbox-wrapper-8 .tgl *:before, .checkbox-wrapper-8 .tgl + .tgl-btn { box-sizing: border-box; } .checkbox-wrapper-8 .tgl::-moz-selection, .checkbox-wrapper-8 .tgl:after::-moz-selection, .checkbox-wrapper-8 .tgl:before::-moz-selection, .checkbox-wrapper-8 .tgl *::-moz-selection, .checkbox-wrapper-8 .tgl *:after::-moz-selection, .checkbox-wrapper-8 .tgl *:before::-moz-selection, .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection, .checkbox-wrapper-8 .tgl::selection, .checkbox-wrapper-8 .tgl:after::selection, .checkbox-wrapper-8 .tgl:before::selection, .checkbox-wrapper-8 .tgl *::selection, .checkbox-wrapper-8 .tgl *:after::selection, .checkbox-wrapper-8 .tgl *:before::selection, .checkbox-wrapper-8 .tgl + .tgl-btn::selection { background: none; } .checkbox-wrapper-8 .tgl + .tgl-btn { outline: 0; display: block; width: 4em; height: 2em; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-wrapper-8 .tgl + .tgl-btn:after, .checkbox-wrapper-8 .tgl + .tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%; } .checkbox-wrapper-8 .tgl + .tgl-btn:after { left: 0; } .checkbox-wrapper-8 .tgl + .tgl-btn:before { display: none; } .checkbox-wrapper-8 .tgl:checked + .tgl-btn:after { left: 50%; } .checkbox-wrapper-8 .tgl-skewed + .tgl-btn { overflow: hidden; transform: skew(-10deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.2s ease; font-family: sans-serif; background: #888; } .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after, .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before { transform: skew(10deg); display: inline-block; transition: all 0.2s ease; width: 100%; text-align: center; position: absolute; line-height: 2em; font-weight: bold; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after { left: 100%; content: attr(data-tg-on); } .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before { left: 0; content: attr(data-tg-off); } .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active { background: #888; } .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before { left: -10%; } .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn { background: #86d993; } .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before { left: -100%; } .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after { left: 0; } .checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after { left: 10%; } </style>

Example code for BBC Radio 1. <audio autoplay id="myAudio"> <source src="https://as-hls-ww.live.cf.md.bbci.co.uk/pool_904/live/ww/bbc_radio_one/bbc_radio_one.isml/bbc_radio_one-audio%3d96000.norewind.m3u8" type="audio/mpeg"> </audio>