Audiojsを使ってみた

今日はホームページ制作に関するメモです。
今回はmusicページにmp3を埋め込んだ方法を書きます。

ソースはこんなかんじです。

<audio src="music/○○○.mp3" preload="none"></audio>

<audio> タグでもすでにmp3の埋め込みはできているのですが、問題点としてaudio要素をサポートしているブラウザがまだあまりなく、当方の環境だとChrome以外のブラウザではうまく再生がされないようです。

そこで次の手順

JavaScriptを使ったもので、audio要素をイベントとして動作するスクリプトのようです。自分じゃこんなもの書けませんが既にネット上にいいものがあるのでそれを使うことにしますｗ

まずここでAudiojsをダウンロードします。詳しい使い方もここに書いてあります。
https://kolber.github.io/audiojs/

次にダウンロードした中にあるaudiojsフォルダをindexファイルと同じ階層にアップします。あとは最後にヘッダ内にスクリプトを書きます。※パスはアップロード先に応じて変更してください。

<script src="./audiojs/audio.min.js"></script>
<script>
  audiojs.events.ready(function(){
    audiojs.createAll();
  });
</script>

これで完了です。一応動作確認したところ、Chrome、firefox、IE8では全て正常に動作しました。一点注意としては、audio要素の記述時にcontrol属性を追記すると、Chromeでプレイヤーがダブって表示されてしまいます ので、preload=none が無難かと思います。

ﾉｼ