0
好吧..已經有3個星期了，我一直在努力做到這一點。似乎很簡單.. 200頁左右，我看了這麼說。將icecast音頻流讀入javascript。無論我做什麼......我讀，我得到了同樣的錯誤回來....使用CORS訪問Icecast流JavaScript的src屬性html5
MediaElementAudioSource輸出零由於對http://192.168.0.27:8010/stream.mp3
包括CORS訪問限制是2個文件我用..
的Icecast xml文件...
<location>Canada</location>
<admin>[email protected]</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>
由於許多不同的方式我嘗試..或任何文檔我讀，似乎沒有任何工作。不想使用任何花哨的圖書館。試圖教自己的代碼。
尼斯。很有用。 –