MediaElementAudioSource由于CORS访问限制而输出零 [英] MediaElementAudioSource outputs zeroes due to CORS access restrictions

查看：581 发布时间：2017/1/11 18:19:30 javascript api audio cors shoutcast

本文介绍了MediaElementAudioSource由于CORS访问限制而输出零的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 < script> 
 //创建一个音频对象的新实例并调整其某些属性
 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; 
 //建立分析器将使用的所有变量
 var canvas，ctx，source，context，analyzer，fbc_array，bars，bar_x，bar_width，bar_height; 
 //在页面将所有的HTML加载到窗口后初始化MP3播放器
 window.addEventListener（load，initMp3Player，false）; 
 function initMp3Player（）{
 document.getElementById（'audio_box'）。appendChild（audio）; 
 context = new（window.AudioContext || window.webkitAudioContext）（）; // AudioContext对象实例// AudioContext对象实例
 analyzer = context.createAnalyser（）; // AnalyserNode method 
 canvas = document.getElementById（'analyser_render'）; 
 ctx = canvas.getContext（'2d'）; 
 //将音频重放路由到AudioContext的处理图中
 source = context.createMediaElementSource（audio）; 
 source.crossOrigin ='anonymous'
 source.connect（analyzer）; 
 analyser.connect（context.destination）; 
 frameLooper（）; 
} 
 // frameLooper（）动画处理音频频率的任何图形样式
 //以浏览器提供的默认帧速率循环（约60 FPS）
 function frameLooper（）{
（requestAnimationFrame || webkitRequestAnimationFrame）（frameLooper）; 
 fbc_array = new Uint8Array（analyser.frequencyBinCount）; 
 analyser.getByteFrequencyData（fbc_array）; //获取频率
 
 ctx.clearRect（0，0，canvas.width，canvas.height）; //清除画布
 ctx.fillStyle ='＃00CCFF'; // bar的颜色
 bars = 100; 
 for（var i = 0; i  bar_x = i * 3; 
 bar_width = 2; 
 bar_height =  - （fbc_array [i] / 2）; 
 // fillRect（x，y，width，height）//下面的参数说明
 ctx.fillRect（bar_x，canvas.height，bar_width，bar_height）; 
} 
} 
< / script>

由于CORS存取限制，Audio API会提供 MediaElementAudioSource输出零，尝试播放SHOUTcast网址。我不知道该怎么办;我已经尝试过所有的解决方案在互联网上，但没有工作。

 
 
 该网址与音频元素完美配合，所以它不是关于URL;我甚至尝试过 http://subdomain.domain.org:port/file.mp3 。我发现在互联网上的人使用Icecast是 .ogg 有同样的问题。如何解决此问题？
解决方案
在我的回答中，我将假设以下设置：
 
 
  
 您的串流网址是 http://stream.radio.com ：8000 / mount （或 http://stream.radio.com:8000/ ; stream / 1  for Shoutcast）
 
 您放置HTML / JS代码网址的paget网址为 http://radio.com/player  
 
 
 
 
 要使这项工作，您需要： / p> 
 
 
 
 将您的流的访问控制允许原始标头设置为您的域或 *  
 
 在javascript中，将音频标记 crossOrigin  anonymous audio.crossOrigin =anonymous; 
 
 另一个选项是使用反向代理将流式网址移动到原始域。
 
 
使用 Icecast ，您可以使用配置文件设置Access-Control-Allow-Origin ，只需将以下行添加到您的icecast.xml，我通常在开头< icecast> 标记后添加它们：
 < http-headers> 
< header name =Access-Control-Allow-Originvalue =*/> 
< header name =Access-Control-Allow-Headersvalue =Origin，Accept，X-Requested-With，Content-Type，If-Modified-Since/> 
< header name =Access-Control-Allow-Methodsvalue =GET，OPTIONS，HEAD/> 
< / http-headers> 
  
不要忘记在这些更改后重新启动Icecast。当您的Icecast将恢复在线时，您可以使用此命令检查标题：
  lynx -head -dump http：// stream .radio.com：8000 / mount 
  
响应应如下所示：
 服务器：Icecast 2.4.2 
 .... 
访问控制允许原产地：* 
访问-Control-Allow-Headers：Origin，Accept，X-Requested-With，Content-Type，If 
 -Modified- Since 
 Access-Control-Allow-Methods：GET，OPTIONS，HEAD 
  
如您所见，Access-Control-Allow-Origin：* 
 
 
  Shoutcast  
 
 
 不幸的是，Shoutcast不允许您设置HTTP标头（.htaccess不是一个选项），但是我们可以在Web服务器配置中创建一个反向代理，这将允许你托管来自主域 -   radio.com 的流。我将为Nginx和Apache提供代理配置。
 
 
   Nginx  
 
 
 使用proxy_set_header添加其他标题，但基本示例是：
 
 
  服务器{
 listen 80; 
 server_name radio.com; 
 .... 
 location / stream {
 proxy_set_header X-Forwarded  - 对于$ remote_addr; 
 proxy_pass http://stream.radio.com:8000/mount; 
} 
 .... 
}  
 
 
   Apache  p> 
 
 
激活Apache代理模块，并更新radio.com虚拟主机配置配置：
 
 
   ; VirtualHost *：80> 
 ServerName radio.com 
 .... 
 ProxyPass / stream http://stream.radio.com:8000/mount 
< / VirtualHost>  
 
 
 现在，您可以使用 http：// radio .com / stream 网址和CORS政策不适用。此解决方案还带来了一些额外的优点：
 
 
  
 您可以将您的http Shoutcast / Icecast流转换为https，因此浏览器不会抱怨当您将流嵌入到使用https托管的网页时，会出现不安全的内容。 （Icecast支持SSL配置本身）
 
  8000端口将替换为端口80，这将允许具有防火墙后面的8000端口的侦听器访问您的流。
 
 
 
<script>
// 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);
    }
}
</script>
Audio API gives MediaElementAudioSource outputs zeroes due to CORS access restrictions because I'm trying to play a SHOUTcast URL. I don't know what to do; I have tried all solutions on the internet but nothing worked. Any help will be appreciated.

The URL works perfectly with audio element so its not about the URL; I have even tried something like  http://subdomain.domain.org:port/file.mp3. And I found on the internet people using Icecast which is .ogg have same problem. How to fix this?
 解决方案 
In my response I will assume the following setup:


Your stream URL is http://stream.radio.com:8000/mount (or http://stream.radio.com:8000/;stream/1 for Shoutcast)
Your paget URL where you place your HTML/JS code URL is http://radio.com/player


To get this working you need:

Set the "Access-Control-Allow-Origin" header of your stream to your domain or *
In javascript, set audio tag crossOrigin property to "anonymous" audio.crossOrigin="anonymous";
Another option it to move you stream URL to the original domain using reverse proxy.
With Icecast you cat set the "Access-Control-Allow-Origin" header using configuration file, just add the following lines to your icecast.xml, I usually add them right after the opening <icecast> tag:
<http-headers>
        <header name="Access-Control-Allow-Origin" value="*" />
        <header name="Access-Control-Allow-Headers" value="Origin, Accept, X-Requested-With, Content-Type, If-Modified-Since" />
        <header name="Access-Control-Allow-Methods" value="GET, OPTIONS, HEAD" />
</http-headers>
Don't forget to restart Icecast after these changes. When your Icecast will be back online you can check the headers with this command:
lynx -head -dump http://stream.radio.com:8000/mount 
Response should look something like this:
Server: Icecast 2.4.2
....
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, If
-Modified-Since
Access-Control-Allow-Methods: GET, OPTIONS, HEAD
As you can see, "Access-Control-Allow-Origin: *" header is present.

Shoutcast

Unfortunately, Shoutcast does not allow you to set HTTP headers (.htaccess is not an option too), but we can create a reverse proxy in web server configuration, this will allow you to host the stream from the main domain - radio.com. I will provide proxy configurations for Nginx and Apache.

Nginx

You can add additional headers with "proxy_set_header", but the basic example is:

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

Activate Apache proxy modules, and update radio.com virtual host configuration configuration:

<VirtualHost *:80>
   ServerName radio.com
   ....
   ProxyPass /stream http://stream.radio.com:8000/mount
</VirtualHost>

Now you can access your stream using http://radio.com/stream URL and the CORS policy will not apply. This solution also brings some additional perks:


you can convert your http Shoutcast/Icecast stream to https, so the browsers will not complain about accessing unsecure content when you will embed your stream to the page hosted with https. (Icecast supports SSL configuration itself)
8000 port will be replaced with port 80, that will allow listeners with  8000 port behind firewall to access your stream.


                        这篇关于MediaElementAudioSource由于CORS访问限制而输出零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

MediaElementAudioSource由于CORS访问限制而输出零 [英] MediaElementAudioSource outputs zeroes due to CORS access restrictions

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

MediaElementAudioSource由于CORS访问限制而输出零 [英] MediaElementAudioSource outputs zeroes due to CORS access restrictions

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭