ピュアJSでData URIな音データを再生
base64変換されたmp3な音データを生のJavaScriptで再生する方法のメモです。 今回は、mp3のbase64文字列データからData URI形式のデータを作成し、HTML Audio でビープ音を再生しています。
目次
サンプルコード
再生ボタンを押すとビープ音が再生されます:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>base64な音を再生</title>
</head>
<body>
<button onclick="beep()">再生</button>
<script type="text/javascript">
// buttonクリックハンドラ
document.querySelector("button").onclick = function() {
// mp3 の base64 音データ: 「ピコーン！」
const base64 = "SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjQwLjEwMQAAAAAAAAAAAAAA//NwwAAAAAAAAAAAAEluZm8AAAAPAAAADgAAAiQAYWFhYWFhYW1tbW1tbW15eXl5eXl5hoaGhoaGhpKSkpKSkpKenp6enp6eqqqqqqqqqra2tra2tra2wsLCwsLCws/Pz8/Pz8/b29vb29vb5+fn5+fn5/Pz8/Pz8/P/////////AAAAAExhdmM1Ni42MAAAAAAAAAAAAAAAACQAAAAAAAAAAAIkrpFKWwAAAAAAAAAAAAAAAAD/8xDEAALIAqgBQBAA//8/WH///UCAIAgq///zEsQBAzlK2AGAEAD/yvo+C///8WX5fwX/yP/zEMQCA2k+rAHAUACBbNb/q////0JgUmqH//MQxAEDATqsCAAOcMIP/ikVK3///icOwD7/8xDEAgNROqAQABpwNf/0AGSe///+M5Bq+P/zEMQBAwk6kAAAGnB+f/zIJd////h9KNX4//MQxAECyTqMAAAUcA7/8qEj2///g6eq+EX/8xDEAgNJOoQAA1UAn/8gAAmd///4OifVEP/zEMQBAuk6nDAADnBB8Bv/4a////FIeleB//MSxAIDETp8AANVCEZ//MQ3G///+wdq+Ai3//MQxAMC0TqAAAKPAP5QFf///xMGqv/cJv//8xDEBALhOowBQDgA54Pv///xMXr/768Ic//zEMQFA9kWhAGAOADqb8VjB+pv/4jdFUxB//MQxAIAAANIAcAAAE1FMy45OS41VVVVVVU=";
// base64 => Data URI形式:
const datauri = "data:audio/mp3;base64," + base64;
// オーディオインスタンスを取得:
const sound = new Audio(datauri);
// 音を再生:
sound.play();
};
</script>
</body>
</html>TIP
音データのbase64文字列を取得する方法
以下はmp3な音データファイルからbase64文字列を取得する方法です。(※Linuxを想定)
まずはあらかじめサンプルの音源としてテキトーなwavファイルをダウンロードしておきましょう。 ここでは例として input.wav というファイルをダウンロードしたとします。
次にffmpegコマンドを使って以下のように output.mp3 に変換します。 (※ffmpegが既にインストールされていることが前提です)
wavファイルのmp3化: (※ファイルサイズを極力小さくするために音質をかなり捨てています)
# wavのmp3化:
# -ac 1: モノラル / -ac 2: ステレオ
# -ar 22050: サンプルレート 22050
# -ab 8k: ビットレート 8k
$ ffmpeg -i "input.wav" -vn -ac 1 -ar 22050 -ab 8k -acodec libmp3lame -f mp3 "output.mp3"変換された output.mp3 のbase64文字列を取得:
$ base64 -w 0 output.mp3
SUQzBAAAAA... ## <= base64文字列が出力されます。ここで出力されたbase64文字列を"data:audio/mp3;base64,"に連結すればmp3音データの Data URI が完成です。
以上です。