Как я могу динамически загружать / воспроизводить / приостанавливать многоканальное аудио HTML5 при нажатии? - PullRequest
Новая
       13

Как я могу динамически загружать / воспроизводить / приостанавливать многоканальное аудио HTML5 при нажатии?

2 голосов
/ 07 февраля 2012

У меня есть ползунок содержимого, установленный для воспроизведения / остановки при каждом щелчке.

Проблема: я хочу, чтобы он приостанавливался при втором щелчке.Прямо сейчас это не остановится.Любые идеи?

См. Сайт здесь: http://dev.alsoknownas.ca/music/ (раздел аудио брендинга на домашней странице).

Вот код:

** Отредактировано, чтобы отразить кодпредложенный Ллойдом ниже: 

<audio id="player"></audio>

Вот сценарий: 

$(document).ready(function(){
$("span.1").attr("data-src","song.mp3");
$("span.2").attr("data-src","song2.mp3");
$("span.3").attr("data-src","song3.mp3");
$("span.4").attr("data-src","song4.mp3");
$("span.5").attr("data-src","song5.mp3");
});

$("span.1,span.2,span.3,span.4,span.5").click(function () {
  var player = document.getElementById("player");
  player.src = this.getAttribute("data-src");
  player.play();
});

Ответы [ 2 ]

1 голос
/ 07 февраля 2012

для этой разметки: 

<audio id="player"></audio>

<span class="1">one</span>
<span class="2">two</span>

используйте этот скрипт: 

$("span.1")
    .attr("data-src-mp3","song1.mp3")
    .attr("data-src-ogg","song1.ogg");
$("span.2")
    .attr("data-src-mp3","song2.mp3")
    .attr("data-src-ogg","song2.ogg");

$("span[data-src-mp3]").click(function () {
    var player = document.getElementById("player"),
        $this = $(this);

    if ($this.hasClass("selected")) {
        if (player.paused) {
            player.play();
        } else {
            player.pause();
        }
    } 
    else {
        $("span[data-src-mp3].selected").removeClass("selected");
        $this.addClass("selected");
        $(player)
            .empty()
            .append($("<source>").attr("src", $this.attr("data-src-mp3")))
            .append($("<source>").attr("src", $this.attr("data-src-ogg")))
        player.play();
    }
});

Демонстрационная версия: http://jsfiddle.net/75lb/8cGBx/

0 голосов
/ 07 февраля 2012

Попробуйте это,

Вместо выполнения 

$('audio').bind('play','pause', function() {

Выполните 

$('audio').bind('play pause', function(event) {

В соответствии с вашим кодом, по умолчанию звук останавливается, когда пользователь нажимает, онначинает играть, и при следующем щелчке он останавливается.

Надеюсь, это работает для вас.

...