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

Question

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

Спасибо !!!

Answer 1

Проверьте этот пример . Он использует 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>​

Это работает для столько аудио файлов, сколько вы хотите воспроизвести. Посмотрите этот пример , который принимает несколько источников.

См. пример , который был обновлен для эстетики.

Answer 2

вот пример того, как запустить воспроизведение звука через пользовательские изображения значков ... этот метод использует 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>

Answer 3

Вы можете использовать элемент AUDIO для современных браузеров. Для IE8 и старше вы можете попробовать использовать элемент BGSOUND и / или резервный Flash.