ブラウザ上で.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>で挟んである単位で音源を配置した．
この記事を参考にした．
こんな感じで表示される．
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に制限した上でドロップなどで選べるようにした．
選択したファイルを再生できるように
現状に加えて
<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>次のような感じになる．
きちんと選択したファイルの名前が出力されている．
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')この記事が気に入ったらサポートをしてみませんか？