關於audio標簽播放跨域的問題

遇到過的錯誤:

DOMException: The play() request was interrupted by a new load request.

DOMException: Failed to load because no supported source was found.

 

到底這個標簽的src可以跨域嗎?

先看一個例子: (瀏覽器也有差異,IE瀏覽器都可以播放)

<audio id="musicplayer" preload="auto" >
    <source src="m.mp3" type="audio/mpeg" id="musicsource">
</audio>
<script>
    var audio =document.getElementById("musicplayer");
    audio.crossOrigin = 'anonymous';
    audio.src='https://fourthof5assets.s3-eu-west-1.amazonaws.com/heng-feeling-good.mp3';//可以播放
    //audio.src='https://awp.qq.com/act/a20160315live/shake_sound_male.mp3';//不可以播放
    audio.play();
</script>

再看他們的區別:

 

 

第二個的返回頭:

總結:其實audio標簽是可以跨域的,關鍵是被跨的那個服務器允不允許.... 

----------------

應該要在跨域服務器 apache或iis  虛擬目錄配置文件,配置允許跨域請求.

apache為例:

Apache跨域設置：

例如a.com里面的頁面需要跨域請求 b.com 里面的資源；
那么需要設置b.com返回的HTML請求里面配置Access-Control-Allow-Origin Header。不要搞混了去配置a.com的域名。

可以配置具體請求的Header，或者在apache配置文件里面進行統一配置（所以使用set 而不是 add）；即在<VirtualHost>節點或者<Directory>節點下添加如下代碼：

Header set Access-Control-Allow-Origin "http://a.com"

或

Header set Access-Control-Allow-Origin "*"

經過測試發現，如果指定具體的域名，只能指定一個域名；Access-Control-Allow-Origin 不能同時指定多個域名地址；也不支持配置http://*.a.com這樣的通配符；只能是具體的某個域名或者 "*"；

轉:https://www.jianshu.com/p/e18722bc67a7