创建YouTube流HTML5的音频频谱

Creating audio spectrum of youtube stream HTML5

本文关键字：音频 HTML5 YouTube 创建      更新时间：2023-09-26

createMediaElementSource in HTML5 （Draw visualization of youtube video）.这可能吗？

如果是的话，你能给我举个例子吗？我只想添加一个传统的 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>

我认为这是不可能的，因为您无法从页面访问Youtube-Iframe/Page的HTML5-Video-Element。不幸的是，Youtube不允许CORS，这可以防止这种情况：http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

也许下载音频并使用wavesurfer将是解决方案？它将解决Joriktos指出的问题。虽然需要后端。

相关文章：