使用CORS JavaScript src属性html5访问Icecast流

好的。。我已经试了三个星期了。看起来很简单。。我看过的大约200页都是这么说的。把一个icecast音频流读成javascript。无论我做什么…读什么，我都会得到同样的错误。。。。

由于的CORS访问限制，MediaElementAudioSource输出零http://192.168.0.27:8010/stream.mp3

包括我使用的2个文件。。

Icecast xml文件。。。

<location>Canada</location>
<admin>admin@autodude666.com</admin>
<hostname>localhost</hostname>
<limits>
    <clients>100</clients>
    <sources>2</sources>
    <queue-size>524288</queue-size>
    <client-timeout>30</client-timeout>
    <header-timeout>15</header-timeout>
    <source-timeout>10</source-timeout>
      <burst-on-connect>1</burst-on-connect>
       <burst-size>65535</burst-size>
</limits>
<authentication>
    <source-password>...</source-password>
    <relay-password>....</relay-password>
     <admin-user>...</admin-user>
    <admin-password....</admin-password>
</authentication>
<listen-socket>
    <port>8010</port>
</listen-socket>
    <!-- Global header settings 
     Headers defined here will be returned for every HTTP request to Icecast.
     The ACAO header makes Icecast public content/API by default
     This will make streams easier embeddable (some HTML5 functionality needs it).
     Also it allows direct access to e.g. /status-json.xsl from other sites.
     If you don't want this, comment out the following line or read up on CORS. 
-->
<http-headers>
<header name="Access-Control-Allow-Origin" value="*" />
</http-headers>

<paths>
    <logdir>./log</logdir>
    <webroot>./web</webroot>
    <adminroot>./admin</adminroot>
    <alias source="/" destination="/status.xsl"/>
</paths>
<logging>
    <accesslog>access.log</accesslog>
    <errorlog>error.log</errorlog>

</logging>

这是html文件。。。

<!DOCTYPE HTML>
<html lang="en">
<head>
<style>
div#mp3_player{ width:500px; height:90px; background:#000; padding:5px; margin:50px auto; }
div#mp3_player > div > audio{  width:500px; background:#000; float:left;  }
div#mp3_player > canvas{ width:500px; height:60px; background:#002D3C; float:left; }
</style>
<script>
</script>
<script>
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'http://192.168.0.27:8010/stream.mp3'; /*'';Five Finger Death Punch - Wrong Side Side of Heaven HD.mp3*/
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
    document.getElementById('audio_box').appendChild(audio);
    context = new AudioContext(); // AudioContext object instance
    analyser = context.createAnalyser(); // AnalyserNode method
    canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    // Re-route audio playback into the processing graph of the AudioContext
    source = context.createMediaElementSource(audio); 
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = '#00CCFF'; // Color of the bars
    bars = 100;
    for (var i = 0; i < bars; i++) {
        bar_x = i * 3;
        bar_width = 2;
        bar_height = -(fbc_array[i] / 2);
        //  fillRect( x, y, width, height ) // Explanation of the parameters below
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}
</script>
</head>
<body>
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>
</div>
<div>

            <audio controls >
            <source src="http://192.168.0.27:8010/stream.mp3" type="audio/mp3"></source>
            </audio>
</div>
</body>
</html>

我尝试了很多不同的方式。。或者无论我读到什么文件，似乎都不起作用。不想使用任何花哨的库。试着自学代码。

将'crossorgin="anonymous"'添加到html标记中。

<audio controls crossorigin="anonymous">
<source src="http://myicecastserver.dns/mount" type="audio/mpeg" />
</audio>

我也遇到了同样的问题，在玩这个游戏时，通过在音频标签中添加交叉原点元素来解决这个问题：https://www.bignerdranch.com/blog/music-visualization-with-d3-js/

相关内容

最新更新

热门标签：