Javascript を使用して MP3 ファイルを再生する方法

MP3 オーディオ ファイルを Web ページに埋め込んで再生するには、さまざまな方法があります。 HTML の非推奨の「embed」タグ、さまざまな Flash プレーヤー、および Java ベースのプレーヤーはすべてその例です。 HTML5 標準は、スクリプト作成に重点を置いており、サードパーティ ソフトウェアに依存していないため、MP3 を Web ページに埋め込んで再生するための最も互換性のある方法を提供します。 HTML5 の「オーディオ」オブジェクトを含む MP3 ファイルを埋め込み、JavaScript 関数を使用して再生を開始します

ステップ 1

次のコードを HTML ドキュメントの本文に追加します:

このコードは、MP3 ファイルを埋め込んで読み込みますが、再生はしません。 「src」タグの値には、MP3 ファイルへのパスとファイル名が含まれます。

ステップ 2

HTML ドキュメントの「head」タグの間に次の JavaScript コードを追加します:

この関数は、呼び出されると、id ("mp3") によって "audio" 要素にアクセスし、メソッド play() を使用してそれを再生します。

ステップ 3

ユーザーがクリックしたときに "playMP3" 関数を呼び出すボタンを Web ページに追加します。次のコードを HTML ドキュメントの本文に追加します:

「値」属性を変更して、ボタンに別のタイトルを付けます。

ステップ 4

"playMP3" の代わりに次の関数を使用して、ユーザーがファイルを開始した後にファイルを一時停止できるようにします:

function playpauseMP3(){ if(document.getElementById("mp3").paused){ document.getElementById("mp3").play(); }else{ document.getElementById("mp3").pause(); } }

ステップ 3 の「input」タグの「onClick」属性を、この関数の名前と一致するように変更します。