JavaScriptでMP3を再生するとき試聴のように再生時間を決めて停止する方法

とあるお話で、iOSでMP3を試聴させたいのだけど全部の曲を短く切るのはあまりに大変なので、なんとかして頭１０秒くらいで停止するような視聴の方法はできないものかという話を頂いた。
いろいろグーグル先生に問い合わせてもそのようなサンプルが見つからなかったのでどうしたもんかといろいろ探したところ、
「Buzz! A Javascript HTML5 Audio library」という便利そうなライブラリがあったのでサンプルを作ってみた。

ダウンロードやマニュアルはこちら

ちょいちょいBGMなるので、音量に気をつけてください。あと英語です。
Buzz! A Javascript HTML5 Audio library
Buzz! A Javascript HTML5 Audio library Documentation

実行サンプル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>audio_test</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="buzz.js"></script>
  <script>
    var Sound = new buzz.sound("/sound/sen",{formats: ["ogg","mp3","wav"]});
    $(function() {
      Sound.bind("timeupdate", function(e) {
        var timer = this.getTime();
        document.getElementById("timer").innerHTML = parseInt(timer);
        document.getElementById("status").innerHTML = "<span style='color:#F00;'>試聴中</span>";
        if (timer > 10) {
          Sound.stop();
        }
      });
      
      Sound.bind("pause", function(e) {
        document.getElementById("status").innerHTML = "<span style='color:#00F;'>停止中</span>";
      });
      
      $('.play').click(function(){
        Sound.play().setVolume(90);
        Sound.setTime(0);
      });
      
      $('.stop').click(function(){
        Sound.stop();
      });
    });
  </script>
</head>

<body>
  <div>
    <header>
      <h1>MP3 audio_test</h1>
    </header>
    <div>
      <div id="status"><span style='color:#00F;'>停止中</span></div>
      <div id="timer">&nbsp;</div>
      <a href="#" class="play" >再生</a><br /><br />
      <a href="#" class="stop" >停止</a><br />
    </div>
    <footer>
     <p>&copy; Copyright  by satosan</p>
    </footer>
  </div>
</body>
</html>

では簡単に説明に移ります。
あくまで試聴的な感じにするために、普通の再生とかフェードインとかフェードアウトについては試していません。
繰り返し言いますが、今回のテーマは「３分とか５分とかで入っているMP3ファイルをツールなどを用いて短く編集することなく試聴っぽく短く再生し終了する」です。
（表現が下手で長くてすいません。）

var Sound = new buzz.sound("/sound/sen",{formats: ["ogg","mp3","wav"]});

まず、/sound/senというのが、sen.mp3やらsen.oggやらsen.wavを指します。
ブラウザによってはファイルがなければ鳴りませんのでそこはご理解ください。テストはsafariで行なってます。
あとipod touchの第五世代でも再生出来ました。（MP3ファイル）

$('.play').click(function(){
  Sound.play().setVolume(90);
  Sound.setTime(0);
});

こちらは再生リンクが押された時の処理です。
setTime(0)をうまく指定すれば開始時間も変えられると思います。
（今回は頭０秒からで問題ないので０指定）

$(function() {
  Sound.bind("timeupdate", function(e) {
    var timer = this.getTime();
    document.getElementById("timer").innerHTML = parseInt(timer);
    document.getElementById("status").innerHTML = "<span style='color:#F00;'>試聴中</span>";
    if (timer > 10) {
      Sound.stop();
    }
});

こちらが試聴っぽくするためのキモです。
timeupdateイベントを取得して再生中はひたすらここに処理が来ます。
その時の秒を" this.getTime(); "で取得して、１０秒たったか？と確認し続けます。
１０秒以上になったら" Sound.stop(); "で終了というか停止。

Sound.bind("pause", function(e) {
  document.getElementById("status").innerHTML = "<span style='color:#00F;'>停止中</span>";
});

停止した時に来るイベントがpauseイベントとなります。
ここで、止まったことを示す処理を書き込めば問題ないと思います。
（他に停止時に渡ってくる別のイベントが有るかもしれませんが、とりあえずこれっぽかったのでこちらを利用しました。）

まとめ

一気にサンプル書いて検証したのですが、試聴っぽくできたとは思います。
あとは、Buzzライブラリにあるフェードアウトとかも適用すれば、バサッと曲を切った感じで停止しないと思いますが、概ねしたい事が達成できました。
試聴用ファイルを全部作るのは嫌！ってところからこの話は来たのですけど、これで膨大な試聴ファイルを作らんで済めば幸せです。

他にも試聴用に使える感じの似たような動作をさせる事ができるライブラリ無いかな・・。
そして、楽に。

さとうさんのキロク

生活と雑記と時々ネコ

JavaScriptでMP3を再生するとき試聴のように再生時間を決めて停止する方法

ダウンロードやマニュアルはこちら

実行サンプル

まとめ