#audio.js
MP3を再生するjs。HTML5です。IE7,8では動かなかったです（当然か）
参考にしたサイト
ダウンロード
上記サイトからダウンロードしてそれっぽいところに置く
audiojs.swfはaudio.min.jsと同じディレクトリに置いた
<head>タグ内で呼び出し
head
<script type="text/javascript" src="/js/audio.min.js"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>
プレイヤーを表示させたいところに<audio>タグを置く
プレイヤー
<audio src="/mix/1.mp3" preload="auto" />
これでとりあえずは音が鳴る
でも今回はプレイヤーを表示させずに音楽をただひたすらループさせたかったので改造
<audio>タグ内にloopって書くとループになるみたい。
プレイヤーを非表示にする方法がよくわからなかったので、とりあえず<div>タグで囲ってCSSでdisplay:none;にした。
プレイヤーを消して音楽はループ
<div style="display:none;">
<audio src="/mix/1.mp3" preload="auto" loop />
</div>
さらに、自分で作ったボタンでスタート・ストップを制御したい
さらにさらに、キーボードでもスタート・ストップを制御する
headタグ内
<!-- jQuery 召喚 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
jQuery(function() {
var a = audiojs.createAll();
var audio = a[0];
// 自作ボタンでの制御
jQuery('.play').click(function(e) { audio.play(); });
jQuery('.pause').click(function(e) { audio.pause(); });
// キーボードでの制御
jQuery(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// Zキーを押すとスタート
// Eキーを押すとストップ
if (unicode == 90) {
audio.play();
} else if(unicode == 69){
audio.pause();
}
})
});
</script>
スタート・ストップボタン
<button class="play">スタート</button>
<button class="pause">ストップ</button>
できあがり