使用 javascript 音频 API 将音频流添加到 html 音频元素答案

【问题标题】：Add audio stream to html audio element with javascript audio API使用 javascript 音频 API 将音频流添加到 html 音频元素
【发布时间】：2015-07-19 18:30:43
【问题描述】：

我正在尝试使用 javascript 音频 API 将音频流添加到 html 音频元素。下面的代码与服务器上的源文件完美配合，但它不会添加流。在 html 级别使用 html5 音频启动流可以正常工作，但 sn-p 的其余部分将不起作用。这是我的 javascript 和 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>

我的问题是......服务器上的文件工作正常......但流不会播放。它似乎正在加载，但我没有来自流的声音。使用源文件的演示位于enter link description here

我要播放的流是http://173.35.234.36:8000/stream

TY 可以提供任何帮助:)

【问题讨论】：

173.35.234.36:8000/stream 找不到您请求的文件
@monkey 链接对我来说很好
链接工作正常....它在autodude666.com/network ..... 和@Patrick Roberts.. TYVM.. 我会调查它。
@JamesWalker 我刚刚通过在我的演示站点上的控制台中运行它来测试你的代码，它工作正常。只是出于好奇，当您说您请求http://173.35.234.36:8000/stream 时，为什么要将src 设置为Five Finger Death Punch - Wrong Side Side of Heaven HD.mp3？此外，如果是跨域请求，远程服务器需要支持 CORS 才能使网络音频 API 正常工作。
嘿@PatrickRoberts。声音文件在我的主机上，在 php 文件旁边......同一个域。我试图阅读 CORS 链接.. 我没有得到任何地方。没有任何联系。无法弄清楚将代码放在哪里。这篇文章似乎是为 Pro 写的。我只是一个中级新手。流是从我家用机器的流媒体服务器发送的。我理解这个概念......托管向我的本地服务器发送请求，我的本地服务器发送流。这就是我所得到的。有没有更多关于这个主题的文献？我冷找不到...也许搜索错误的单词。

标签： javascript html audio

【解决方案1】：

事实证明，您的端点http://173.35.234.36:8000/stream 不支持CORS。当从不同的来源（即不同的域、端口或协议）请求它时，该请求将被浏览器拒绝，原因如下：

由于http://173.35.234.36:8000/stream 的 CORS 访问限制，MediaElementAudioSource 输出零

【讨论】：