Skip to content

Instantly share code, notes, and snippets.

@Offbeatmammal
Created October 6, 2011 04:06
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save Offbeatmammal/1266499 to your computer and use it in GitHub Desktop.
Save Offbeatmammal/1266499 to your computer and use it in GitHub Desktop.
HTML5, JavaScript to load a .pls file to <audio> tag. Uses error and ended events to move to the next item
<! 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>
@Offbeatmammal
Copy link
Author

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

@juanmaalcaide
Copy link

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

@Gaperville
Copy link

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

@kabubi
Copy link

kabubi commented May 19, 2014

works with aac+ streaming?

Copy link

ghost commented Jun 10, 2014

Working only with http://listen.di.fm/public3/chillout.pls ?
Or I've missed smth?

@luchosrock
Copy link

I believe this won't work if the pls metadata is hosted on another server (CORS issue I guess)

@senocak
Copy link

senocak commented Jan 3, 2017

doesnt work

@vrasi98
Copy link

vrasi98 commented Jan 5, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment