Create a gist now

Instantly share code, notes, and snippets.

HTML5, JavaScript to load a .pls file to <audio> tag. Uses error and ended events to move to the next item
<! DOCTYPE html>
<title>PLS Processor</title>
<!-- needed for IE9 to ensure it treats page as HTML5 properly -->
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<p>Audio PLS processor<p>
<audio id="audio" controls="controls"></audio >
<p id="title">item title</p>
// 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");
}"GET", "http://{url}/{file}.pls", false);
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 = document.getElementById("audio");
// hook onEnded and onError events to jump to next PLS item"error", audioEvent, false);"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 { = false; = pls.Items[whichItem].file;
var title = document.getElementById("title");
title.innerText = pls.Items[whichItem].title + "[" + pls.curItem + "/" + pls.Items[whichItem].file + "]";
return true;

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


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



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


works with aac+ streaming?


Working only with ?
Or I've missed smth?


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

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