【Base64 を利用】音声ファイルを HTML ファイルに直接記述する方法

はじめに

HTML ファイルには CSS や JavaScript を直接記述することができますが、音声ファイルも工夫すればファイル内に直接記述することができます。

本記事では、Base64 を利用した方法を紹介します。

実装

まずは、音声ファイルを Base64 形式の文字列に変換します。

検索すると、オンライン上で変換できるページがすぐに見つかると思います。

あとは、その文字列の前に 'data:audio/mp3;base64,' をつけるだけで完成です。

<script>
const audioBase64String = 'Base64 形式の音声ファイル';
const audioDataUri = 'data:audio/mp3;base64,' + audioBase64String;
const sound = new Audio(audioDataUri);
sound.play();
</script>

ただ、この方法は Web ページの読み込み速度が遅くなるため、用途に限られます。