2015-07-19 129 views
0

我試圖用javascript音頻API將音頻流添加到html音頻元素。下面的代碼與服務器上的源文件完美協作,但不會添加流。在html級別開始使用html5音頻的流可以正常工作,但片段的其餘部分不起作用。這是我的JavaScript和HTML。使用JavaScript音頻API將音頻流添加到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> 
// Create a new instance of an audio object and adjust some of its properties 
var audio = new Audio(); 
audio.src = '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 webkitAudioContext(); // 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.webkitRequestAnimationFrame(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> 
</body> 
</html> 

我的問題是.....在服務器上的文件工作正常....但流不會播放。它似乎加載,但我從流中沒有聲音。 一個其與SORCE文件工作的演示是在enter link description here

我試圖播放流是http://173.35.234.36:8000/stream

TY對於可能b提供:)

+0

http://173.35.234.36:8000/stream你找不到的文件找不到 – monkey

+0

@monkey鏈接對我來說工作正常 –

+0

鏈接工作正常....它是在線http://autodude666.com/網絡.....和@Patrick Roberts .. TYVM ..我會研究它。 –

回答