Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link
Owner Author

commented Oct 6, 2011

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

This comment has been minimized.

Copy link

commented Jul 12, 2013

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

This comment has been minimized.

Copy link

commented Mar 12, 2014

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

@kabubi

This comment has been minimized.

Copy link

commented May 19, 2014

works with aac+ streaming?

@nickzcv

This comment has been minimized.

Copy link

commented Jun 10, 2014

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

@luchosrock

This comment has been minimized.

Copy link

commented Aug 1, 2015

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

@senocak

This comment has been minimized.

Copy link

commented Jan 3, 2017

doesnt work

@vrasi98

This comment has been minimized.

Copy link

commented Jan 5, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.