メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

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

データベースに格納された音声データ(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タグの実装ブラウザより異なったオーディオプレイヤーおよびプレーアイコンの追加

やりたいこと:HTML5の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をアイコンで実装結果

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads