ブラウザ上で.wavをドロップ,再生
目標
タイトル通り,ブラウザ上に.wavファイルをドロップさせ,その音源が再生できるようにしたい.
ドロップなしで音源を配置
一旦,元から指定した音源を置いておき,再生できるようにしてみることにする.
index.html
<html>
<head>
<meta charset="utf-8"/>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("build.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</head>
<body>
</body>
<div>
<h2>Distortion guitar</h2>
<audio controls loop>
<source src="../sound_source/distortionguitar.wav" type="audio/wav"/>
</audio>
</div>
<div>
<h2>Drum & Base</h2>
<audio controls loop>
<source src="../sound_source/drum&base.wav" type="audio/wav"/>
</audio>
</div>
<div>
<h2>Simple Rythm</h2>
<audio controls loop>
<source src="../sound_source/simple.wav" type="audio/wav"/>
</audio>
</div>
</html>
<div>で挟んである単位で音源を配置した.
この記事を参考にした.
![](https://assets.st-note.com/img/1668945791016-eRGQQRks11.png?width=1200)
こんな感じで表示される.
controls loopとしてあるので,各音源は終了するとまた最初から再生される.
ドロップなどで選択できるように
<form action="myForm.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="myFile" id="myFile" accept="audio/wav">
<input type="submit" value="送信">
</form>
このようにすることで,選択できる拡張子を.wavに制限した上でドロップなどで選べるようにした.
![](https://assets.st-note.com/img/1668948131401-IrluPMuke5.png?width=1200)
選択したファイルを再生できるように
現状に加えて
<input type="file"> の change イベントリスナの中で、その input の files[0] から URL.createObjectURL() で blob URL を作り、それを <audio> の src にセットし、play() する.
一つずつ見ていこう.
change イベント
change イベントは <input>, <select>, <textarea> 要素において、ユーザーによる要素の値の変更が確定したときに発行されます。 input イベントとは異なり、 change イベントは要素の値 (value) が変更されるたびに発生するとは限りません。
色々使い方の例が載っている記事を次に載せる.
files[0]
Goのargsとかと似たようなものです.
この記事の「JavaScriptで選択されたファイルデータを取得する」の部分で使われているところを見れば何となく理解できる.
一旦
ここまでで見てきたchangeとfiles[0]を使って,選択した.wavファイルをコンソール上に出力するコードを組んでみる.
<html>
<head>
<meta charset="utf-8"/>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("build.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</head>
<body>
</body>
<div>
<h2>Distortion guitar</h2>
<audio controls loop>
<source src="../sound_source/distortionguitar.wav" type="audio/wav"/>
</audio>
</div>
<div>
<h2>Drum & Base</h2>
<audio controls loop>
<source src="../sound_source/drum&base.wav" type="audio/wav"/>
</audio>
</div>
<div>
<h2>Simple Rythm</h2>
<audio controls loop>
<source src="../sound_source/simple.wav" type="audio/wav"/>
</audio>
</div>
<form action="myForm.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="myFile" id="myFile" accept="audio/wav">
<p>Select the .wav file you wish to play, if any</p>
<script>
// input要素
const fileInput = document.getElementById('myFile');
// changeイベントで呼び出す関数
const handleFileSelect = () => {
const files = fileInput.files;
console.log(files[0]); // 1つ1つのファイルデータはfiles[i]で取得できる
}
// ファイル選択時にhandleFileSelectを発火
fileInput.addEventListener('change', handleFileSelect);
</script>
<input type="submit" value="送信">
</form>
</html>
次のような感じになる.
![](https://assets.st-note.com/img/1669102907115-cMaLqGq7kJ.png?width=1200)
きちんと選択したファイルの名前が出力されている.
blob URL
「Blob」(Binary Large Object)とは、データベース管理システムで用いられるデータ型のひとつ。
通常のデータ型のフィールドには格納できない、画像、動画、プログラムなどのバイナリーデータを格納するための型として使われる。のちにJavaScriptでも実装される。
JavaScriptでの「Blob」は、「File API」の中で定義されている「Blob」オブジェクトのことを指す。
データベース管理システムでのBlobと同様にバイナリーデータを扱うためのもの。
Blob URL Scheme」とは、「URLスキーム」に「blob:」が設定されたURLのこと。
URL.createObjectURL()
Blob URL Schemeを生成するための,URLインターフェースが持つメソッドのこと.
Document.querySelector()
<audio>のsrcにセットするのに用いるメソッドである.
(index):49 Uncaught TypeError: Cannot set properties of null (setting 'src')
この記事が気に入ったらサポートをしてみませんか?