芽萌丸プログラミング部 @programming
@programming
2020/5/25 8:21 更新✏

ピュア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 が完成です。

以上です。

pure JavaScript

芽萌丸プログラミング部 @programming
芽萌丸プログラミング部@programming
プログラミング関連アカウント。Web標準技術を中心に書いていきます。フロントエンドからサーバサイドまで JavaScript だけで済ませたい人たちの集いです。記事は主に @TanakaSoftwareLab が担当。
オススメ:Zattoyomiで時事ネタチェックの時間節約!