title: Audio from Icecast server not playing in Chrome
body: <p>I'm having trouble getting static content (mp3 files) served by an Icecast server to play in Google Chrome browser with HTML5. The reason we're serving the mp3s via Icecast is policy: the CPB requires they be "streamed" and not "downloaded" since we're public radio. Our live audio streams play just fine in Chrome. </p>
  
  <p>If you put the URL for an MP3 served by my Icecast 2.4.3 server straight into the URL bar in google Chrome, it does not play. Do the same thing in Firefox, IE, Safari, etc.. it plays! Try it: </p>
  
  <p><a href="https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3" rel="noreferrer">https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3</a> </p>
  
  <p>(The temporary solution I'm using is Flash but the latest update to Chrome (v60.0) makes Flash blocked by default, the "Always allow for this website" option does not seem to be working, and the little icon showing that Flash is blocked is much more discrete. Try it here: <a href="http://kansaspublicradio.org/kpr-news/midwest-farmers-hope-boost-online-grocery-shopping" rel="noreferrer">http://kansaspublicradio.org/kpr-news/midwest-farmers-hope-boost-online-grocery-shopping</a> )</p>
  
  <p>My best guess as to why this is happening is that it has something to do with this: <a href="https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en" rel="noreferrer">https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en</a></p>
  
  <p>So I tried to reproduce their code example, in which they monkey with HTML5 Media Capture to get audio to play without user interaction. But with <a href="https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3" rel="noreferrer">this URL for the audio</a>, it fails to play and throws this error: <code>Uncaught (in promise) DOMException: The element has no supported sources.</code> Try it: <a href="https://jsfiddle.net/wo94xohr/2/" rel="noreferrer">https://jsfiddle.net/wo94xohr/2/</a> It only fails in Chrome and not Firefox or others.</p>
  
  <p>I tried again but without the HTML5 Media Capture stuff. Still no dice. Try it: <a href="https://jsfiddle.net/yrhets74/" rel="noreferrer">https://jsfiddle.net/yrhets74/</a></p>
  
  <p>Also, if you look at the response headers, you see "Content-Range:bytes 0-0/0"... could this mean something? </p>
  
  <hr>
  
  <p><strong>UPDATE:</strong> I'm testing to see if this is a CORS (cross origin resource sharing) issue. I've updated <a href="https://jsfiddle.net/yrhets74/2/" rel="noreferrer">the jsfiddle</a> to: </p>
  
  <pre><code>var audioElement = document.querySelector('#music');
  audioElement.crossOrigin = "anonymous"; // CORS access restriction. Worth a shot but no dice
  audioElement.type = "audio/mpeg"; // just in case? idk
  audioElement.src = "https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3";
  
  function startPlayback() {
    // .play() is a Promise
    return audioElement.play().then(function(x){console.log('yay!')}, function(reason){
        console.log('Error: ' + reason);
    });
  }
  var playButton = document.querySelector('#play');
  playButton.addEventListener('click', startPlayback);
  </code></pre>
  
  <p>It hasn't changed the end result on Chrome, but on Firefox it doesn't play now and it gives the warning: <code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).</code></p>
  
  <p>Do you think the Icecast server needs the 'Access-Control-Allow-Origin' header set to 'allow' or something?</p>
  
  <p>Here's the full response from the Icecast server:</p>
  
  <pre><code>Request URL:https://streaming.kansaspublicradio.org:8001/mp3/First_0713886.mp3
  Request Method:GET
  Status Code:206 Partial Content
  Remote Address:129.237.213.244:8001
  Referrer Policy:no-referrer-when-downgrade
  
  Response Headers
  view source
  Accept-Ranges:bytes
  Cache-Control:no-cache
  Content-Length:526408
  Content-Range:bytes 0-0/0
  Content-Type:audio/mpeg
  Date:Tue, 15 Aug 2017 19:34:23 GMT
  Expires:Mon, 26 Jul 1997 05:00:00 GMT
  Pragma:no-cache
  Server:Icecast 2.4.3
  
  Request Headers
  view source
  Accept:*/*
  Accept-Encoding:identity;q=1, *;q=0
  Accept-Language:en-US,en;q=0.8,ms;q=0.6
  Cache-Control:no-cache
  Connection:keep-alive
  DNT:1
  Host:streaming.kansaspublicradio.org:8001
  Origin:https://fiddle.jshell.net
  Pragma:no-cache
  Range:bytes=0-
  Referer:https://fiddle.jshell.net/_display/
  User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE 2:</strong> We've added the CORS header <code>Access-Control-Allow-Origin:*</code> to the icecast server's response headers and now the jsfiddle works in Firefox - no <code>CORS header ‘Access-Control-Allow-Origin’ missing</code> warning. Still does not play in Chrome though :(</p>
  
  <p>I also tested WAV files and M3U files and neither will play in Chrome. Firefox could play the wav file (with the JSfiddle code) but no the m3u file</p>