Trung tâm cá nhân
sách gpt4 ăn đã đi

javascript - 由于 CORS 访问限制，MediaElementAudioSource 输出零

In lại 作者：数据小太阳 更新时间：2023-10-29 05:51:58 28 4
mua khóa gpt4 giày nike 


// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'http://subdomain.domain.org:port/;stream/1';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
audio.crossorigin="anonymous";
// 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 (window.AudioContext || window.webkitAudioContext)(); // AudioContext object instance // 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.crossOrigin = 'anonymous'   
    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(){
    (requestAnimationFrame || webkitRequestAnimationFrame)(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);//get frequency

    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);
    }
}

由于 CORS 访问限制，音频 API MediaElementAudioSource 输出为零，因为我正在尝试播放 SHOUTcast URL。我不知道该怎么办;我已经尝试了互联网上的所有解决方案，但没有任何效果。任何帮助将不胜感激。

URL 与音频元素完美配合，因此它与 URL 无关；我什至尝试过像 http://subdomain.domain.org:port/file.mp3 这样的东西。我在互联网上发现使用 .ogg 的 Icecast 的人有同样的问题。如何解决这个问题？

câu trả lời hay nhất

在我的回复中，我将采用以下设置:

要实现此功能，您需要:

  1. 将流的“Access-Control-Allow-Origin” header 设置为您的域或 *
  2. 在 javascript 中，将 âm thanh đánh dấu crossOrigin 属性设置为“匿名”audio.crossOrigin="anonymous" ;
  3. 另一种选择是使用反向代理将您的流 URL 移动到原始域。

sử dụngIcecast，您可以使用配置文件设置“Access-Control-Allow-Origin” header ，只需将以下行添加到您的icecast.xml 中，我通常在打开 后立即添加它们标签:


不要忘记在这些更改后重新启动 Icecast。当您的 Icecast 重新联机时，您可以使用以下命令检查 header :

lynx -head -dump http://stream.radio.com:8000/mount

响应应该是这样的:

Server: Icecast 2.4.2
....
Kiểm soát truy cập-Cho phép-Nguồn gốc: *
Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, If
-Modified-Since
Access-Control-Allow-Methods: GET, OPTIONS, HEAD

如您所见，存在“Access-Control-Allow-Origin: *” header 。

广播

不幸的是，Shoutcast 不允许您设置 HTTP header (.htaccess 也不是一个选项)，但我们可以在 Web 服务器配置中创建一个反向代理，这将允许您托管来自主域的流 - radio.com .我将为 Nginx 和 Apache 提供代理配置。

Nginx

您可以使用“proxy_set_header”添加额外的 header ，但基本示例是:

máy chủ {
    listen 80;
    server_name radio.com;
    ....
    location /stream { 
       proxy_set_header X-Forwarded-For $remote_addr; 
       proxy_pass http://stream.radio.com:8000/mount; 
    }
    ....
}

Apache

激活Apache代理模块，更新radio.com虚拟主机配置配置:


   ServerName radio.com
   ....
   ProxyPass /stream http://stream.radio.com:8000/mount

现在您可以使用 http://radio.com/stream URL 访问您的流，CORS 政策将不适用。该解决方案还带来了一些额外的好处:

  • 您可以将 http Shoutcast/Icecast 流转换为 https，这样当您将流嵌入到使用 https 托管的页面时，浏览器不会提示访问不安全的内容。 (Icecast 本身支持 SSL 配置)
  • 8000 端口将替换为端口 80，这将允许在防火墙后具有 8000 端口的监听器访问您的流。

关于javascript - 由于 CORS 访问限制，MediaElementAudioSource 输出零，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31083704/

28 4 0
Đề xuất bài viết: xcode - 此应用程序的包标识符与其代码签名标识符不匹配
Đề xuất bài viết: javascript - google.setOnLoadCallback 不起作用/不等到加载任何内容
Đề xuất bài viết: swift - 使用重载函数作为一等公民
Đề xuất bài viết: javascript - node.js + request => node.js + bluebird + request
数据小太阳
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress