WEBページでMP3を扱う方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

一昔前に流行った言葉で「リッチコンテンツ」というのがあります。
 

WEBマーケティング系をやっている人であれば、「懐かしい」と感じるかもしれません。
 

リッチコンテンツとは
 

言葉自体は古く感じますが、インターネットWEBページにおいて、動画や音楽、効果音を再生する事は、コンテンツとしてクオリティを感じてもらいやすいと思います。
 

今回はMP3をWEBページで再生する時に、AudioAPIの扱いに少し戸惑ったので、まとめておくために記事にしておきました。

WEBページでmp3を再生する方法

1. audioタグ

もっとも簡単な方法ですが、audioタグにmp3ファイルのURLを指定するだけで、コントローラも含めて簡単に表示する事ができ、手軽に再生できます。


– Demo

2. sourceタグ

audioタグとほぼ同じですが、少し書き方を変えて登録でき、複数のコンテンツに対応できます。


– Demo

3. AudioContext

mp3ファイルの読み込みを完了してから、色々な作業を行いたい場合に、onloadイベントを利用できないので、AudioContextを利用する必要があります。

Demo

AudioContextを極める

audioタグとsourceタグは、さほど注意点はなく、読み込みタイミングなどを厳密にコントロールしないのであれば、mp3ファイルに対してファイルリンクをセットするぐらいなのですが、AudioContextを使ったやり方はかなり癖が強かったので、下記に説明しておきます。
 

フロー説明

1. ajaxにより、mp3を読み込む
2. データ読み込み完了したonsuccessのタイミングで、音源の秒数などを取得
3. 再生タイミングで”createBufferSource”を実行して音源を都度セット
4. 停止タイミングで、sourceに保存しているデータをdeleteします。

つまずきポイント

何故かわから無いのですが、context読み込みが完了し始めた段階で再生していないのにも関わらず、currentTimeがカウントアップされていきます。
 

そのため、startTime , pauseTimeをそれぞれ保持して、ポーズ→再生などの際に値を計算してはめこまなければいけません。
 

audioタグでは、こうしためんどくささはなく、jsでcurrentTimeが普通に取得できたのに、この仕様は正直いただけない感じですね。

音源設置の注意

通常は、フリー音源サイトのmp3をファウンロードして、mp3ファイルを同じサーバーに設置するのですが、今回は手抜きをして、フリー音源サイトの直リンクで行なっています。
その際に、サーバーアクセスに問題があったので、phpで一旦サーバーダウンロードする仕様にしています。
 

この点は、あまり真似していただかなくていいです。

音源リンク

今回の記事で使用させていただいたフリー音源のサイトです。
 

無料・フリー高音質BGM音楽素材/魔王魂

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です