データベースに格納された音声データ(mp3)を再生する方法

サイズが小さくて大量な音声データはデータベース（例：MySQL）に格納したほうが良い

  • バイナリデータ（例：mp3、jpegなど）をデータベースに格納することをよく議論されて、反対されることが多いです
    • htmlで音声/画像などのバイナリデータはファイルとして扱われ、ファイルとして保存し、ブラウザにロードされるのは一般的です
  • 音声/画像データのサイズが大きければ、データベースにデータの保存、取得に時間が掛かり、パフォーマンスの問題を生じます
  • 但し、サイズが小さくて(約1~2kb)、大量なファイル(数千、数万個ファイル)がある場合、話は変わります
    • 大量なファイルデータの管理が大変です
    • フォルダにアクセスするだけで時間が掛かります
  • この場合にデータベースのテーブルに保存したほうがメリットが多いようです
    • フィールドのタイプ：BLOB
    • サイズが小さくて(1~2kb)、データへのアクセスパフォーマンス影響はあまり見られないです

音声データをbase64でエンコードしてブラウザに転送してaudioタグで再生

  • 音声のバイナリデータ(例：mp3)を直接にブラウザに転送して、audioタグで再生することはできません
  • ここで、base64で音声バイナリデータをエンコードして、audioタグのsourceに直接に渡します（以下はphpの例） 
    function processmusic($song){
    global $db_user, $db_password, $db_name, $db_host;
    $dsn = 'mysql:dbname='.$db_name.';host='.$db_host.'';
    try {
        $db = new PDO($dsn, $db_user, $db_password);
    } catch (PDOException $e) {
        return 'Connection failed: ' . $e->getMessage();
    }
    if (($result = $db->query('SELECT music FROM music WHERE `name` = "'.$song.'"')) !== false) {
        return '<div content="Content-Type: audio/mp3">  // audioタイプのコンテンツ使用定義
                    <audio controls="controls" preload="metadata" autoplay>   // sourceにbase64でエンコードしたmp3データをセット
                        <source src="data:audio/mp3;base64,'.base64_encode($result->fetch(PDO::FETCH_COLUMN)).'"/>;
                    </audio>
                </div>';
    } else {
        // 失敗時の処理
    }
}
  • ブラウザの開発ツールでaudioタグのソースを見ると、base64でエンコードされたmp3データが文字列として表示されます
    base64でエンコードされたmp3データ
  • これで、audioタグで音声の再生はできるはずです

HTML5のAudioタグの実装ブラウザより異なったオーディオプレイヤーおよびプレーアイコンの追加

やりたいこと：HTML５のAudioタグで簡易な音声再生UI（ボリューム、再生時間などは必要はない）を作成したいです

  • HTML5に音声再生できるタグはAudioが存在しています 
    <audio src="audio/sample.mp3" controls></audio>
  • audioタグの属性「controls」を定義すると、各ブラウザがオーディオ再生UIがそれぞれ作成されています
    各ブラウザがHTML5のaudioタグ実装
  • 各ブラウザがaudioのプレイUIが違いいます

問題点：audioタグの属性「controls」設定で各ブラウザのaudioプレイUIのカスタマイズができない

  • 各ブラウザで生成されたaudioプレイUIが固定され、プレイのみ（例：再生時間、ボリュームなどなし）にすることはできない
  • 各ブラウザのプレイUIの設定方法が不明です

解決：audioタグの属性「controls」を設定しなくて、各種アイコン、ボタンなどでaudioプレイUIを追加します

  • audioの属性（play, pasue, volume+ など）をjavascriptで操作します
  • audioプレイUIをアイコンで表示します（例：Fontawsomeなど） 
    <audio id="play-sound" src='/audio/sample.mp3'  preload="none" />
<a href="#" onclick="document.getElementById('play-sound').play()">
    <i class="fa fa-volume-up" aria-hidden="true"></i>
</a>
  • 上記コードの実装結果は以下のようです
    AudioプレイUIをアイコンで実装結果