public
Last active

HTML5, 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>

pls2audio.html is a simple sample that allows you to

  • point to a .pls (shoutcast/icecast) source
  • grab the streams/elements
  • load them into an HTML5 tag
  • hook into the error and ended events on the tag to advance through the pls file

Please feel free to tweak and improve

http://post.offbeatmammal.com

Hello!
I need to play this radio station, but does not work. How I can do? Thanks.

RADIO: http://app-spain.com/pruebas/listen.pls

I see the player, but the file is not playing the pls file? using Drupal 7.26. any ideas? thanks

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.