スマフォのブラウザで音声再生

f:id:haru-komugi:20140713124652j:plain

スマフォのブラウザで音声再生します。
今回は audiojs というライブラリを使用しています。

サンプルはこちら
http://moeten.info/js/20140713_audiojsTest/
※Chromeを使用してください。

ソースコードはこちら
index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <script src="lib/audiojs/audio.min.js"></script>
  <title></title>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">

    $(function(){

      var as;
      var cnt=0;

      //ボタンクリックイベント
      $("#myButton").bind( "click" , function(){

        //オーディオファイルを指定（ファイル末尾にキャッシュ対策として文字列をちょっと追加してます）
        $("#myAudio").attr("src" , "mp3/sound" + ( cnt % 2 ) + ".mp3?" + cnt );

        //初期化されてなければ作成
        if( !as ){
          as = audiojs.createAll();
        }

        //再生
        as[0].play();

        cnt++;

      });

    });
  </script>
  <style type="text/css">
    body{
      text-align: center;
    }
    .audiojs{
      display: none;
    }
    #myButton{
      background: #ffc578;
      background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23));
      background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%);
      background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%);
      background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%);
      background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 );
      padding: 5px 12px;
      font-size: 20px;
      font-weight: bold;
      border: 1px solid gray;
      border-radius: 4px;
      margin-bottom: 13px;
    }
  </style>
</head>
<body>
<audio id="myAudio"></audio>
<button id="myButton">再生</button><br/>
※音が出ます
</body>
</html>

ブラウザでも音がでるので、ちょっとしたアプリが作れそうですね。

参考リンク

audio.js