HTMLのいくつかの曲のためのシンプルなカスタム再生ボタン

Question

私がしたいのは、自分が作成したカスタム画像をユーザーが押したページにいくつかの曲を投稿することだけです。私はこれをiPadとiPhoneで動作させたいので、私はFlashを使いたくない。しかし、私は、標準のコンソールとは対照的にかわいい再生ボタンを作成したい。

ありがとうございました！

Answer 1

チェックアウトはexampleです。 それはHTML5にあなたがプレイしたいので、これは、できるだけ多くのオーディオファイルのために働くaudioタグ

HTML

<a onclick="this.firstChild.play()" class="button"> 
    <audio src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"> 
    </audio> 
&#9658;</a>​ 

を使用しています。複数のソースを取得するこのexampleを参照してください。

これを参照してくださいexampleは、審美的に更新されました。

Answer 2

最新のブラウザにAUDIO要素を使用することができます。 IE8以前では、BGSOUND要素やFlashフォールバックを利用しようとすることができます。

Answer 3

ここでカスタムアイコンイメージを介してオーディオ再生をトリガーする方法の例は、このメソッドはjPlayerがそうクロスプラットフォーム..このフィドルにそれをテストで使用しています。..です： http://jsfiddle.net/75lb/XPkTz/

例のマークアップ：

<div id="audio"></div> 
<a href="http://www.freesfx.co.uk/rx2/mp3s/3/2665_1315685839.mp3"> 
    <img src="http://icons.iconarchive.com/icons/creative-freedom/shimmer/48/Play-icon.png" /> 
</a> 
<a href="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"> 
    <img src="http://icons.iconarchive.com/icons/creative-freedom/shimmer/48/Play-icon.png" /> 
</a> 

とスクリプト：

$("#audio").jPlayer({ 
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf", 
    supplied: "mp3" 
}); 

$("a").click(function(e) { 
    $("#audio").jPlayer("setMedia", { 
     mp3: this.href 
    }).jPlayer("play"); 

    e.preventDefault(); 
}); 
​ 

あなたのページにjQueryとjPlayerをロードしていることを確認することを忘れないでください：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script> 
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>