創建YouTube流的音頻頻譜HTML5

HTML5中的createMediaElementSource（繪製YouTube視頻的可視化效果）。那可能嗎？創建YouTube流的音頻頻譜HTML5

你能告訴我一個例子嗎？我只想添加一個傳統的YouTube播放器，並在其下進行頻譜/可視化，我在互聯網上找到了一個mp3版本。

這是它的一個音頻/ mp3版本，我不知道這是否可以與YouTube視頻流一起使用。

<style type="text/css"> 
div#mp3_player{ width:500px; height:60px; 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:30px; 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 = '613814.mp3'; 
audio.controls = true; 
audio.loop = true; 
audio.autoplay = false; 
// 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>

來源

2013-10-16 Kavvson Empcraft