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

サイズが小さくて大量な音声データはデータベース（例：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データが文字列として表示されます
  
• これで、audioタグで音声の再生はできるはずです