createMediaElementSourceでローカルの音声ファイルを取得し、<audio>のコントロールで再生しようとするとCORSアクセス制限に引っ掛かる

ローカル上のHTML5 + JavaScriptを使用し、createMediaElementSourceで音声ファイルを取得した上で、<audio>タグのコントロールで再生ボタンをクリックすると再生できなくて困っています。
この現象について分かる方いましたら、ご教示願います。

該当のソースコード

HTML5
1<!doctype html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>index.html</title>
6        <script src="audio.js"></script>
7    </head>
8    <body>
9        <audio controls src="file:///home/my_name/ドキュメント/aaa.mp3">
10            <p>ご使用のブラウザは、<code>audio</code>タグをサポートしていないようです。</p>
11        </audio>
12    </body>
13</html>

JavaScript
1window.onload = function() {
2    console.log("start");
3    var audioContext = new (window.AudioContext || window.webkitAudioContext)();
4    
5    var audioElement = document.querySelector('audio');
6    
7    var source = audioContext.createMediaElementSource(audioElement);
8    console.log(source);
9
10    source.connect(audioContext.destination);
11}

###再生ボタンを押したときのコンソールのメッセージ

Console
1MediaElementAudioSource outputs zeroes due to CORS access restrictions for file:///home/my_name/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88/aaa.mp3

試したこと

<audio>タグ内に「crossOrigin="anonymous"」を追加→解決せず

ockeghem

2019/10/07 22:30

HTMLはどのようなURLでアクセスしていますか?

mogumo

2019/10/07 23:09

HTMLはローカルファイルで、Visual Studio Codeで編集して保存し、Code内のタブをそのままChromeにドラッグして開いています。 URLでいうと、「file://」の形式になるかと思います（現在確認することができません。すみません…）

行動規範の内容に同意します

回答1件

ベストアンサー

ローカルファイルにJavaScriptにてアクセスする時は、本質問の通り、CORSエラーが出てしまいます。

これは、詳しくソースを掲示できるわけではないですが（すみません）、JavaScriptにて内部ファイルにアクセスできてしまうと、他のマシンに、ネットワークを通じて、マシン内部に攻撃を容易に可能にしてしまうことに対しての、セキュリティ措置だと考えられます。
（数年前よりブラウザサイドでのセキュリティが大幅に強化されている）

よって、ローカルファイルにJavaScriptによってアクセス情報をコントロールするには、大きく以下の二つの方法があります。

ブラウザのオプション起動

ブラウザのオプション起動によって、JavaScriptなどからのローカルファイルへのアクセスを許可する方法です。
詳しくは、ご自身でお調べください。
なお、現在のブラウザのセキュリティだと、この方法でもうまくいかないかも・・・。

ローカルサーバーを起動して、その中でアクセス

そもそも、CORSエラーは、違ドメイン間でのファイルに直接アクセスによってブラウザ側が起こすエラーなので、
ローカルサーバーを立てて起動し、その中でアクセスすれば、ドメインが同一と認識されるので、CORSエラーは起きません。
ローカルサーバーは、XAMPP（Windows）や、MAMP（Mac）が有名ですね。
こちらも、ご自身でお調べください。

以上、ローカルのスクリプトから、ローカルファイルへの直接アクセスでCORSエラーを起こさない方法です。

投稿2019/10/08 02:28