个人中心
gpt4 book ai didi

javascript - 使用 CORS JavaScript src 属性 html5 访问 Icecast 流

转载 作者：行者123 更新时间：2023-12-02 15:47:02 25 4
gpt4 key购买 nike

好吧..我已经尝试这样做了三周了。看起来很简单..我看过的200页左右都是这么说的。将 Icecast 音频流读入 JavaScript。无论我做什么...我读了什么，我都会得到同样的错误...

由于 http://192.168.0.27:8010/stream.mp3 的 CORS 访问限制，MediaElementAudioSource 输出零

其中包括我使用的 2 个文件..

Icecast xml 文件...

<location>Canada</location>
<admin>admin@autodude666.com</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>

1

<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>

我尝试了很多不同的方法..或者我读过的任何文档，似乎都不起作用。不想使用任何花哨的库。尝试自学代码。

最佳答案

将“crossorigin="anonymous"”添加到您的 html 标记中。

<audio controls crossorigin="anonymous">
<source src="http://myicecastserver.dns/mount" type="audio/mpeg" />
</audio>

我遇到了同样的问题，通过在玩这个游戏时将 crossorigin 元素添加到音频标签来修复它: https://www.bignerdranch.com/blog/music-visualization-with-d3-js/

关于javascript - 使用 CORS JavaScript src 属性 html5 访问 Icecast 流，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32127131/

25 4 0
文章推荐： msbuild - NuGet pack 和 msbuild - 如何将引用程序集打包到另一个位置？
文章推荐： dictionary - 如果满足条件，则从字典中删除项目
文章推荐： haskell - 树上的 map 列表
文章推荐： powershell - 在参数中强制使用完整域名
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com