public
Last active — forked from Offbeatmammal/pls2audio.html

HTML5 and JavaScript to load a *.pls file to <audio> tag. Uses error and ended events to move to the next item

  • Download Gist
pls2audio.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
<! DOCTYPE html>
<html>
<head>
<title>PLS Processor</title>
<!-- needed for IE9 to ensure it treats page as HTML5 properly -->
<meta http-equiv="X-UA-Compatible" content="IE=9" >
</head>
<body>
<p>Audio PLS processor<p>
<audio id="audio" controls="controls"></audio >
<p id="title">item title</p>
 
<script>
// Make XHR request for the pls file
if (window.XMLHttpRequest) {
// code for IE7 +, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET", "http://{url}/{file}.pls", false);
xhr.send();
xhrDoc = xhr.responseText;
 
var pls = {};
 
// split into lines
pls.Entries = xhrDoc.split("\n");
// Entry 0 is [playlist]
// Entry 1 is NumberOfEntries=n
pls.Count = pls.Entries[1].split("=")[1];
// Entry 2,3,4 = File#=,Title#=,Length#=
// repeat from 1 to NumberOfEntries
 
pls.Items = [];
pls.curItem = 0;
pls.listOk = true;
for (var i = 0; i < pls.Count; i ++ ) {
pls.Items.push( {
file: pls.Entries[i + 2].split("=")[1],
title: pls.Entries[i + 3].split("=")[1],
length: pls.Entries[i + 4].split("=")[1]
});
}
// get the audio element
pls.audio = document.getElementById("audio");
 
// hook onEnded and onError events to jump to next PLS item
pls.audio.addEventListener("error", audioEvent, false);
pls.audio.addEventListener("ended", audioEvent, false);
 
// load audio tag with first source
pls.listOk = loadPLS(pls.curItem ++ );
 
function audioEvent(event) {
// if the listOk is still true (ie not at the end of the list)
// step to the next item either on ended or error
if (pls.listOk) {
pls.listOk = loadPLS(pls.curItem ++ );
} else {
// action to indicate end of stream
}
}
function loadPLS(whichItem) {
if (whichItem >= pls.Count) {
return false;
} else {
pls.audio.autoplay = false;
pls.audio.src = pls.Items[whichItem].file;
var title = document.getElementById("title");
title.innerText = pls.Items[whichItem].title + "[" + pls.curItem + "/" + pls.Items[whichItem].file + "]";
return true;
}
}
</script>
</body>
</html>

See @OffbeatMammal's Playing a .pls source in the video tag (5 October 2011) for background and documentation about pushing *.pls info.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.