Манипуляции с атрибутом HTML5 <audio> / <source> с помощью JQuery

0

Я пытаюсь создать простой аудиоплеер с тегом HTML5. У меня есть 3 элемента <source> вложенные в основной элемент <audio>, каждый из которых указывает на звуковую дорожку с несколькими форматами для поддержки кросс-браузера. Я использую простую кнопку для запуска события "click" со следующим кодом:

<audio id="myAudio" preload="none">
  <source src="audio/demo.m4a" type="audio/m4a" />
  <source src="audio/demo.mp3" type="audio/mp3" />
  <source src="audio/demo.ogg" type="audio/ogg" />
  <!-- other sources go here -->
</audio>

var audio = document.getElementById("myAudio");

// Change track!
$("#mute").on("click", function(evt) {
    $("#myAudio > source:gt(2)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
    if(!audio.paused) {
        audio.pause();
        audio.play();
    }
});

Как вы можете догадаться, я пытаюсь изменить атрибут src третьих элементов, применяя фильтр :gt(2). Не только я пытаюсь увеличить трек, но и пытаюсь остановить воспроизведение текущего трека, чтобы новый трек сразу начал воспроизводиться, когда нажимается кнопка. Пока это не влияет на мою веб-страницу.

  • 0
    убедитесь, что вы вызываете audio.load() после переключения источников
Теги:
html5-audio

2 ответа

1
Лучший ответ

Если бы я был вами, я бы не стал беспокоиться об изменении оригинального тега, а вместо этого просто использовал второй звук для demo2. Например:

<audio id="demo1" preload="none">
  <source src="audio/demo.m4a" type="audio/m4a" />
  <source src="audio/demo.mp3" type="audio/mp3" />
  <source src="audio/demo.ogg" type="audio/ogg" />
  <!-- other sources go here -->
</audio>
<audio id="demo2" preload="none">
  <source src="audio/demo2.m4a" type="audio/m4a" />
  <source src="audio/demo2.mp3" type="audio/mp3" />
  <source src="audio/demo2.ogg" type="audio/ogg" />
  <!-- other sources go here -->
</audio>

Если у вас есть много этих звуков, вы можете захотеть генерировать элементы по мере необходимости в javascript.
Этот код должен быть адаптирован для ваших нужд - если у вас будет более двух демонстрационных звуков, вам необходимо адаптировать код для создания соответствующих идентификаторов.

var demo1 = $('#demo1').get();
var demo2 = $('#demo2').get();
//demo2
demo1.play();

// Change track!
$("#mute").on("click", function(evt) {
    demo1.pause();
    demo2.play();
});

Если вы хотите сделать это так, как вы изначально собирались, то этот код должен сделать трюк, который я думаю:

// Change track!
$("#mute").on("click", function(evt) {
    audio.pause();
    //not sure if this line will work as intended if you have more than 3 sources...
    $(audio).find("source:gt(2)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
    audio.load();
    audio.play();
});
Поделиться
  • 0
    Спасибо, я на самом деле не думал о наличии нескольких звуковых тегов. Идея состоит в том, что у меня будет более двух звуков для выбора, и, надеюсь, я смогу сгенерировать несколько ползунков форм, чтобы пользователь мог оценивать каждый звук от 1 до 10, затем отправлять окончательные результаты на сервер, а затем возвращать меня. Это следующая большая часть моей задачи! Я поиграю с кодом и сообщу, как у меня дела.
0

У меня была игра с кодом, и мне удалось пропустить следующий фрагмент звука. Сначала это не сработало, но как только я изменил фильтр :gt на 1 вместо 2, он успешно увеличил дорожку. Я попробовал две разные строки кода, чтобы это работало, и оба, похоже, работают, но моя следующая задача (как вы упомянули) состоит в том, чтобы иметь возможность увеличиваться до третьего, четвертого, пятого,..., n-го треков, а затем пропускать назад к предыдущим трекам. Вот мой рабочий код:

// Change track!
$("#next").on("click", function(evt) {
    // Change the title of the track
    $("#title > p:last").text("Next Track!");
    // Pause current track
    audio.pause();
    // Load the next track and play it
    $(audio).find("source:gt(1)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
    //$("#myAudio > source:gt(1)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
    audio.load();
    audio.play();
});

Меня немного смущает разница этих строк кода ниже (вторая строка прокомментирована, поскольку она вообще не воспроизводит звук):

// Get reference to the audio element
var audio = document.getElementById("myAudio");
//var audio = $('#myAudio').get();

Есть ли принципиальная разница между этими строками кода, поскольку я думал, что они будут делать то же самое? Я точно знаю, что вторая строка возвращает массив.

Кроме того, есть ли метод, который я могу вызвать для сброса/обновления текущей звуковой дорожки?

Поделиться
  • 0
    Вы правы, похоже - у меня сложилось впечатление, что $ ele.get () возвращает $ ele [0], но, очевидно, он создает список узлов! Спасибо что подметил это
  • 0
    А под сбросом / обновлением трека вы подразумеваете переключение на трек, который вы уже выключили?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню