Instantly share code, notes, and snippets.

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>
<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;

This comment has been minimized.


Offbeatmammal 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


This comment has been minimized.

juanmaalcaide commented Jul 12, 2013

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



This comment has been minimized.

Gaperville commented Mar 12, 2014

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


This comment has been minimized.

kabubi commented May 19, 2014

works with aac+ streaming?


This comment has been minimized.

nickzcv commented Jun 10, 2014

Working only with ?
Or I've missed smth?


This comment has been minimized.

luchosrock commented Aug 1, 2015

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


This comment has been minimized.

senocak commented Jan 3, 2017

doesnt work


This comment has been minimized.

vrasi98 commented Jan 5, 2017

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