htmlで，ユーザがファイルをローカルからドラッグさせてその音源ファイルを再生できるようにした

やりたいこと

タイトルにある通りです．
「ファイル選択」という項目をブラウザ上に作り，そこに入れたファイル(.wav)を再生できるようにしたいです．

現状

最初から静的ファイルサーブした.wavファイルを再生できるようにすることや，
再生させることはできなくてもファイルを.wavに絞って指定させることは以下のコードでできました．

ただ，探し方が悪いのか，指定したファイルを再生させるサイトを見つけられなかったので，ここから再生できるようになる方法，もしくはそれが載っているサイトを教えていただきたいです．

index.html

html
1<html>
2    <head>
3        <meta charset="utf-8"/>
4        <script src="wasm_exec.js"></script>
5        <script>
6            const go = new Go();
7            WebAssembly.instantiateStreaming(fetch("build.wasm"), go.importObject).then((result) => {
8                go.run(result.instance);
9            });
10        </script>
11    </head>
12    <body>
13    </body>
14    <div>
15        <h2>Distortion guitar</h2>
16        <audio controls loop>
17            <source src="../sound_source/distortionguitar.wav" type="audio/wav"/>
18          </audio>
19    </div>
20    <div>
21        <h2>Drum & Base</h2>
22        <audio controls loop>
23            <source src="../sound_source/drum&base.wav" type="audio/wav"/>
24          </audio>
25    </div>
26    <div>
27        <h2>Simple Rythm</h2>
28        <audio controls loop>
29            <source src="../sound_source/simple.wav" type="audio/wav"/>
30          </audio>
31    </div>
32
33    <form action="myForm.cgi" method="post" enctype="multipart/form-data">
34        <input type="file" name="myFile" id="myFile" accept="audio/wav">
35        <input type="submit" value="送信">
36    </form>
37</html>

追記

回答を参考に以下のようにコードを書き換えました．

html
1    <form action="myForm.cgi" method="post" enctype="multipart/form-data">
2        <input type="file" name="myFile" id="myFile" accept="audio/wav">
3        <p>Select the .wav file you wish to play, if any</p>
4        <script>
5            // input要素
6            const fileInput = document.getElementById('myFile');
7            // changeイベントで呼び出す関数
8            const handleFileSelect = () => {
9                const files = fileInput.files;
10                console.log(files[0]);
11                var objectUrl = URL.createObjectURL(files[0]);
12                console.log(objectUrl);
13            }
14            // ファイル選択時にhandleFileSelectを発火
15            fileInput.addEventListener('change', handleFileSelect);
16        </script>
17         <audio id="btn_audio">
18            <source src = objectUrl type="audio/wav">
19        </audio>
20    </form>
21    <div class="btn" onclick="audio()">
22        <script>
23            function audio() {
24                document.getElementById('btn_audio').currentTime = 0; //連続クリックに対応
25                document.getElementById('btn_audio').play(); //クリックしたら音を再生
26            }
27        </script>
28    </div>

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

回答1件

ベストアンサー

<input type="file"> の change イベントリスナの中で、その input の files[0] から URL.createObjectURL() で blob URL を作り、それを <audio> の src にセットし、play() します。

投稿2022/11/22 01:55

int32_t

総合スコア20845

aaaa____

2022/11/22 11:47

調べつつ，追記に示すようにhtmlを記述してはみたのですが，blob URLを作るところまではおそらくうまく行くのですが，それをplay()で並ぶことができずにいますので，アドバイスを頂けますと幸いです．

int32_t

2022/11/22 12:54

あとは、関数 handleFileSelect の最後に document.querySelector('#btn_audio source').src = objectUrl; document.querySelector('#btn_audio').play(); ですかね。

aaaa____

2022/11/23 01:45

ありがとうございます． document.querySelector('#btn_audio source').src = objectUrl; のぶぶんは document.querySelector('#btn_audio').src = objectUrl; とはしましたが理想の形で鳴らすことができました．

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