タイトルのとおり、audioタグから音声を取得し、web audio api を用いて音波を表示できるようにします。（ついでに、音量、再生位置、panをユーザーがブラウザを通して動的に操作できるようにします。）
本記事の大まかな流れは以下の通りです。
１， 開発環境の準備
２， web audio api を使った音声の再生、音波の表示
最終的なディレクトリは次の通りとなります。
root/
├ html/
│ ├ index.html
│ └ index.js
│
├ audio/
│ └ audio.mp3
│
├ nginx/
│ └ default.conf
│
├ DockerfileNginx
└ docker-compose.yml
1 開発環境の準備
最初にwebサーバーを立てて、httpによってhtmlファイル、オーディオファイルを開けるようにします。web audio apiということだけあって、webサーバーを立てないと、オーディオファイルを取り扱えません。web audio api を使うときには、まず後述するAudioContextを作成してオーディオファイルと結びつけるのですが、その際オーディオファイルをhttpで取得しないと、音が正常に再生されません。 私は最初、webサーバーを立てずに、audioタグのオーディオファイルをファイルパスから取得していたのですが、そのために少し時間を溶かしました。DockerfileNginx
まずはDockerfileを作成します。dockerfile
FROM nginx:1.19.0-alpine
とりあえずこれだけです。必要最小限です。
default.conf
次にnginxの設定ファイルを書きます。default.conf
server {
listen 80;
client_max_body_size 20M;
location / {
root /usr/share/nginx/html/;
index index.html
try_files $uri $uri/ /index.html;
}
}
上記簡単な解説は、
listen 80;
ポート80番でrequestを待ち受けます。80番はhttpのデフォルトのポート番号。
client_max_body_size 20M
これはデフォルトで1Mですが、1Mだとオーディオファイルを取り扱えないので、20Mで設定しました。
location / { ...
・root以下は、htmlファイルを格納するパスを記載します。
・index index.html → /usr/share/nginx/html/内に格納されていて、これからブラウザで表示したいファイル名を指定します。
docker-compose.yml
最後にdocker-compose.ymlを作成します。docker-compose.yml
version: '3.7'
services:
nginx:
build:
context: .
dockerfile: DockerfileNginx
ports:
- "80:80"
volumes:
- ./html:/usr/share/nginx/html
- ./nginx/:/etc/nginx/conf.d/
上記簡単な解説は、
- ./html:/usr/share/nginx/html
ローカルのhtml/ディレクトリ内のhtmlファイルをdockerのnginxコンテナ内（usr/share/nginx/html）にマウントしています。
- ./nginx/:/etc/nginx/conf.d/
先ほど作成したdefault.confファイルの設定をdockerのnginxコンテナに反映させるために、ローカルのnginx/ディレクトリをdockerの/etc/nginx/conf.dディレクトリにマウントしています。
webサーバー動作確認
試しにnginxを動かしてみます。 まず以下のようなhtmlファイルを作ります。index.html
<html>
<head>
</head>
<body>
<h1>index.html</h1>
<hr/>
</body>
</html>
そしてターミナルで以下のコマンドを打ちます。
$ docker-compose up
そして、ブラウザでhttp://127.0.0.1にアクセスし、以下のような画面が表示されれば動作確認終了です。
開発環境の準備は以上です。
2 web audio api を使った音声の再生
これからjavascriptを書いていきますが、その前にhtmlファイルを作成します。 先ほどのindex.htmlを次のように書き換えます。index.html
<html>
<head>
<meta charset='UTF-8'>
<title>web audio api demo</title>
<script src='./index.js' defer></script>
</head>
<body>
<h1>web audio api</h1>
<hr/>
<audio src='./audio/audio.mp3'
crossOrigin='anonymous'
></audio><br/>
<button>
<span>Play/Pause</span>
</button><br/>
time
<input type='range' id='time' min='0' value='0' step='1' /><br/>
volume
<input type='range' id='volume' min='0' max='0.16' value='0.08' step='0.001' /><br/>
panner
<input type='range' id='panner' min='-1' max='1' value='0' step='0.01'/><br/>
<hr/>
<div>canvas</div>
<canvas id='mycanvas' width='640' height='400'></canvas>
</body>
</html>
本当はaudioタグとcanvasタグが重要でinputタグは飾りですが、あとで使うので、今まとめて書いてます。
次に、javascriptを書いていきます。少し長めです。
index.js
console.clear()
//audioタグから、オーディオエレメントを作ります。
const audioElement = document.querySelector('audio');
//AudioContextを作ります。
const audioContext = new AudioContext();
//異なるドメインから音声ファイルを取得する時に必要な設定です。本当は、今回は設定する必要がありません。
audioContext.crossOrigin='anonymous';
//AudioContextにaudioElementを紐づけます。
const track = audioContext.createMediaElementSource(audioElement);
//Gain Nodeを作ります。再生時に音量を設定するためのノードです。
const gainNode = audioContext.createGain();
gainNode.gain.setValueAtTime(0.08,0)
//Stereo Panner Nodeを作ります。パンを設定するためのノードです。
const pannerOptions = { pan : 0 };
const pannerNode = new StereoPannerNode(audioContext,pannerOptions);
//Analyzer Nodeを作ります。音波のビジュアライズをするために必要なノードです。
const analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 2048;//use for fast fourier transformation
const bufferLength = analyserNode.frequencyBinCount;//half the size of analyserNode.fftSize
const dataArray = new Uint8Array(bufferLength);
//今まで作成してきたノードを全て繋ぎます。
track.connect(gainNode).connect(pannerNode).connect(analyserNode).connect(audioContext.destination);
//音波の壁画のために、canvasを作成します。
//またfunction draw()以下でcanvas常に音波を表示できるようにします。
const canvas = document.getElementById('mycanvas');
const canvasContext = canvas.getContext('2d');
const WIDTH=canvas.width
const HEIGHT=canvas.height
canvasContext.strokeRect(0,0,WIDTH,HEIGHT);
function draw(){
drawVisual = requestAnimationFrame(draw);
analyserNode.getByteTimeDomainData(dataArray);//音波データをUint8Array配列(dataArray)にコピー
canvasContext.fillStyle = 'rgb(200,200,200)';
canvasContext.fillRect(0,0,WIDTH,HEIGHT);
canvasContext.lineWidth = 3;
canvasContext.strokeStyle = 'rgb(0,0,0)';
canvasContext.beginPath();
const sliceWidth = WIDTH * (1.0/bufferLength);
var x = 0;
for(var i=0; i<bufferLength; i++){
var v = dataArray[i] / 128.0;
var y = v * HEIGHT/2 ;
if(i ===0){
canvasContext.moveTo(x,y);
}else{
canvasContext.lineTo(x,y);
}
x+=sliceWidth;
}
canvasContext.lineTo(WIDTH,HEIGHT/2);
canvasContext.stroke();
};
draw();
//おまけ。再生位置、音量、パンをユーザーが画面上から設定できるようにします。
//再生ボタン作成
const playButton = document.querySelector('button');
//再生位置を自由に動かせるように、スライダーを作成。
const timeControl = document.querySelector('#time')
timeControl.setAttribute('max',audioElement.duration)
timeControl.addEventListener('input',function(){
audioElement.currentTime=this.value;
},false)
audioElement.addEventListener('timeupdate',function(){
timeControl.value = audioElement.currentTime
})
//音量を調整できるように、スライダーを作成。
const volumeControl = document.querySelector('#volume');
volumeControl.addEventListener('input',function(){
gainNode.gain.value=this.value;
},false)
playButton.addEventListener('click',function(){
//ユーザーのアクションがあるまで、オーディをファイルは'suspended'状態となり自動再生されません。
//なのでボタンクリックと同時に、resume()で再生されるようにしています。
if (audioContext.state==='suspended'){
audioContext.resume();
}
// 再生した時と一時停止した時のロジック
if (this.dataset.playing === 'false'){
audioElement.play();
this.dataset.playing='true'
} else if (this.dataset.playing==='true'){
audioElement.pause();
this.dataset.playing = 'false'
}
},false)
audioElement.addEventListener('ended',()=>{
playButton.dataset.playing='false';
})
//パンを作成
const pannerControl = document.querySelector('#panner')
pannerControl.addEventListener('input',function(){
pannerNode.pan.value=this.value;
},false)
上記jsファイルを書き終えた後は、http://127.0.0.1にアクセスして、オーディオ再生ボタンを押すだけです。
以下のようになります。
音声再生前
音声再生中
音波が表示されています。また、スライダーの操作を通して、再生位置、音量、パンを調整できるようになっています。