HTML5 Playlist
How do I make an html5 playlist?
From: http://jonhall.info/how_to/create_a_playlist_for_html5_audio. What is a html5 playlist? How do you make a html5 playlist? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.
HTML5 Playlist - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Playlist</title>
</head>
<body> <div id="cwrap"> <div id="nowPlay"> <h3 id="npAction">Paused:</h3> <div id="npTitle"></div> </div> <div id="audiowrap"> <div id="audio0"> <audio id="audio1" controls="controls" width="300"> Your browser does not support the HTML5 Audio Tag. </audio> </div> <div id="extraControls"> <button id="btnPrev" class="ctrlbtn">|<< Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track >>|</button> </div> </div> <div id="plwrap"> <div class="plHead"> <div class="plHeadNum">Track</div> <div class="plHeadTitle">Title</div> <div class="plHeadLength">Length</div> </div> <ul id="plUL"> <li> <div class="plItem"> <div class="plNum">1</div> <div class="plTitle">Happy Birthday Variation: In the style of Beethoven</div> <div class="plLength">0:55</div> </div> </li> <li> <div class="plItem"> <div class="plNum">2</div> <div class="plTitle">Wedding March Variation 1</div> <div class="plLength">0:37</div> </div> </li> <li> <div class="plItem"> <div class="plNum">3</div> <div class="plTitle">Happy Birthday Variation: In the style of Tango</div> <div class="plLength">1:05</div> </div> </li> <li> <div class="plItem"> <div class="plNum">4</div> <div class="plTitle">Wedding March Variation 2</div> <div class="plLength">0:40</div> </div> </li> <li> <div class="plItem"> <div class="plNum">5</div> <div class="plTitle">Random Classical</div> <div class="plLength">0:59</div> </div> </li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
HTML5 Playlist - Script Codes JS Codes
// http://jonhall.info/how_to/create_a_playlist_for_html5_audio
jQuery(function($) { var supportsAudio = !!document.createElement('audio').canPlayType; if(supportsAudio) { var index = 0, playing = false; mediaPath = '/how_to/assets/media/audio/', extension = '', tracks = [ {"track":1,"name":"Happy Birthday Variation: In the style of Beethoven","length":"00:55","file":"01_Happy_Birthday_Variation_In_The"}, {"track":2,"name":"Wedding March Variation 1","length":"00:37","file":"02_Wedding_March_1"}, {"track":3,"name":"Happy Birthday Variation: In the style of Tango","length":"01:05","file":"03_Happy_Birthday_Variation_In_The"}, {"track":4,"name":"Wedding March Variation 2","length":"00:40","file":"04_Wedding_March_2"}, {"track":5,"name":"Random Classical","length":"00:59","file":"05_AFI_com"} ], trackCount = tracks.length, npAction = $('#npAction'), npTitle = $('#npTitle'), audio = $('#audio1').bind('play', function() { playing = true; npAction.text('Now Playing:'); }).bind('pause', function() { playing = false; npAction.text('Paused:'); }).bind('ended', function() { npAction.text('Paused:'); if((index + 1) < trackCount) { index++; loadTrack(index); audio.play(); } else { audio.pause(); index = 0; loadTrack(index); } }).get(0), btnPrev = $('#btnPrev').click(function() { if((index - 1) > -1) { index--; loadTrack(index); if(playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), btnNext = $('#btnNext').click(function() { if((index + 1) < trackCount) { index++; loadTrack(index); if(playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), li = $('#plUL li').click(function() { var id = parseInt($(this).index()); if(id !== index) { playTrack(id); } }), loadTrack = function(id) { $('.plSel').removeClass('plSel'); $('#plUL li:eq(' + id + ')').addClass('plSel'); npTitle.text(tracks[id].name); index = id; audio.src = mediaPath + tracks[id].file + extension; }, playTrack = function(id) { loadTrack(id); audio.play(); }; if(audio.canPlayType('audio/ogg')) { extension = '.ogg'; } if(audio.canPlayType('audio/mpeg')) { extension = '.mp3'; } loadTrack(index); }
}); // END
Developer | Nathan Gregg |
Username | nathansonic |
Uploaded | December 25, 2022 |
Rating | 3 |
Size | 2,712 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Sort Isotope | 6,238 Kb |
CWB logo | 3,375 Kb |
Artist Page Styling v5 | 3,275 Kb |
HTML5 Audio example | 2,039 Kb |
Logo Skews etc | 3,899 Kb |
CWB Trad Journal html | 13,903 Kb |
Matching 2 Arrays | 2,101 Kb |
CWB Full V3 | 8,474 Kb |
CWB Table v4, Bootstrap-Table | 2,780 Kb |
Crappy Fly To Cart - CSS | 2,213 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
Prism | Pyrografix | 2,843 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Image grid with captions | Mchernin34 | 2,222 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!