ピュアJSでData URIな音データを再生

base64変換されたmp3な音データを生のJavaScriptで再生する方法のメモです。今回は、mp3のbase64文字列データからData URI形式のデータを作成し、HTML Audio でビープ音を再生しています。

ピュアJSでData URIな音データを再生
サンプルコード
TIP

音データのbase64文字列を取得する方法

サンプルコード

再生ボタンを押すとビープ音が再生されます:

<!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 が完成です。

以上です。

pure JavaScript

ピュアJSでData URIな音データを再生

サンプルコード

TIP

音データのbase64文字列を取得する方法