May 14th,2016
＃
“crossorigin”属性について
“crossorigin”属性は音声ファイルを読み込む時のCORSリクエストを設定します。“crossorigin”属性を使用した場合、その音声ファイルを読み込む時にCORSリクエストを実行します。
通常“audio”要素で読み込んだ別のオリジンにある音声ファイルを“canvas”要素で再利用する場合、“汚染”されてしまい、使用できる機能が制限されます。しかし、“crossorigin”属性によってCORSを使用することであたかも同じオリジンにある音声ファイルであるかのように使用することができるようになります。
“crossorigin”属性を指定しない場合CORSは使用されません。
＃
＃
サンプルコード
CORSリクエストを実行(認証情報は使用しない)
<p>
<audio crossorigin="anonymous" controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.wav" type="audio/wav">
<source src="sample.ogg" type="audio/ogg">
音声を再生できません
</audio>
</p>
CORSリクエストを実行(認証情報を使用する)
<p>
<audio crossorigin="use-credentials" controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.wav" type="audio/wav">
<source src="sample.ogg" type="audio/ogg">
音声を再生できません
</audio>
</p>
CORSリクエストを実行しない
<p>
<audio controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.wav" type="audio/wav">
<source src="sample.ogg" type="audio/ogg">
音声を再生できません
</audio>
</p>
