Простая пользовательская кнопка воспроизведения для нескольких песен в HTML

Question

Все, что я хочу сделать, это опубликовать несколько песен на моей странице, где пользователь нажимает пользовательский образ, который я создал. Я не хочу использовать Flash, так как хочу, чтобы это работало на iPad и iPhone. Но я хочу создать симпатичную кнопку воспроизведения, а не стандартную консоль.

Спасибо !!!

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 fallback.

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>