MediaElementAudioSource輸出零由於CORS訪問限制

我必須在亞馬遜S3（AWS的MP3設置爲公共）的MP3鏈接的音頻播放器運行正常。MediaElementAudioSource輸出零由於CORS訪問限制

但是當我嘗試做一個可視化工具，只要我連接到audioplayer存在CORS錯誤。我不明白爲什麼會這樣。

我一直在使用analyserNode的MDN樣本爲基礎 https://developer.mozilla.org/en/docs/Web/API/AnalyserNode

<audio id="audio-player-console" src="${AWS_songUrl}" autoplay> 
    <p>Your browser does not support this audio player </p> 
</audio>

只是爲了澄清，只要不試圖爲analyserdata連接時，運行audioplayer沒有問題的軌道。

如果我添加crossorigin =「匿名」的音頻標籤，然後我在所有得到什麼和音頻播放器不能播放的曲目

<audio id="audio-player-console" src="${AWS_songUrl}" crossorigin="anonymous" autoplay> 
    <p>Your browser does not support this audio player </p> 
</audio>

後「公開」我的AWS CORS配置已經設置

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 
</CORSConfiguration>

這裏是我嘗試將音頻標籤連接到audiocontext的可視化，這是一個啓動失敗的CORS檢查

canvasCtx = visualizerCanvas.getContext("2d") 
audioCtx = new (window.AudioContext || window.webkitAudioContext)() 
var audioSrc = audioCtx.createMediaElementSource(aPlayer) 
var analyser = audioCtx.createAnalyser() 
audioSrc.connect(analyser) 
analyser.fftSize = 2048 
var bufferLength = analyser.frequencyBinCount 
var dataArray = new Uint8Array(bufferLength) 
analyser.getByteTimeDomainData(dataArray)

我只是不知道我能做什麼。我已經設置了AWS配置爲public，允許所有的起源和所有的頭

來源

2016-10-02 Jope

我有永遠同樣的問題。我花了好幾個小時試圖弄清楚這一點。我問過兩個SO問題（每個問題都收到upvotes），我剛剛在askubuntu.com上提出了一個問題。我希望我能儘快找出解決辦法，然後我可以在這裏重新發布。 – www139

我認爲這個問題與音頻標記已經創建一個之後可視化器節點導致第二次cors檢查有關。此時文件位於不同位置，因此cors檢查失敗。但我對此並不確定。我通過完全放棄音頻標籤並僅爲整個播放器使用audiocontext對象解決了這個問題：joegrundman.github.io/gplayer-react/ – Jope

我終於想通了小時的研究和實驗小時後做什麼。在寫這篇文章的時候，很少有文檔可以在網上看到如何做到這一點。我希望人們會覺得這很有幫助。

瞭解CORS：

CORS是跨源Resoruce共享的縮寫。 CORS是不同領域之間共享/訪問信息的新標準。 CORS基本上是一種使用服務器頭文件告訴瀏覽器是否允許訪問或與另一臺服務器上的特定文件進行交互的方法。雖然你可以加載大多數事情，而不必擔心CORS（如圖像，音頻，視頻，甚至其他網頁），這些元素的互動，需要從服務器特別許可。就我而言，我試圖從另一臺服務器上的音頻文件中讀取頻率。在這種情況下，我試圖訪問需要服務器上特殊標題授權的信息。

瀏覽器支持是非常好的，但是，如果你是支持舊的瀏覽器，你可能想看到這裏支持表（http://caniuse.com/#search=cors）

我做了什麼：

啓用使用的.htaccess的（我想你可以做到同樣的事情apache2.conf或000-default.conf但.htaccess文件更容易修改和維護）。這些文件用於設置apache的標題和設置。通過轉到/ etc/apache2 /並編輯了apache2.conf，我啓用了.htaccess文件。確保您的條目匹配下面：

<Directory /var/www/> 
     Options Indexes FollowSymLinks 
     AllowOverride All 
     Require all granted 
</Directory>

我設置在我的.htaccess文件的標題，可讓來自Codepen訪問。在要共享的文件所在的目錄中創建一個.htaccess文件。你只想分享你所需要的，或者你可能會造成安全風險。在你的.htaccess文件中輸入：

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

保存您的文件。用此命令重新啓動Apache sudo service apache2 restart。如果有提示，請輸入密碼。隨着音頻，我添加了crossorigin="anonymous"屬性。你可以在這裏閱讀更多關於CORS設置（crossorigin）（https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes）我想你可以用ajax和xhr請求來設置它。不同版本的Apache可能有不同的文件名或標準。檢查並確保您的版本正確無誤。我在我的Ubuntu服務器上運行Apache 2.4.18。

請告訴我這是否可以改善。我花了很多時間瞭解這一點，但我不是專家。在評論中發佈您的問題或建議。 :)

來源

2016-12-29 17:14:04 www139

您可以發佈設置crossorigin =「anonymous」屬性的代碼嗎？ –

MediaElementAudioSource輸出零由於CORS訪問限制

回答

相關問題