У меня есть несколько тегов HTML 5 <Audio>на одной странице, и я хочу, чтобы ВСЕ они останавливались при воспроизведении другой - PullRequest
Новая
       27

У меня есть несколько тегов HTML 5 <Audio>на одной странице, и я хочу, чтобы ВСЕ они останавливались при воспроизведении другой

0 голосов
/ 16 февраля 2020

Я думаю, что мне нужен сценарий, который "получит" все воспроизводимые HTML5 элементы управления звуком и "приостановит" их, за исключением того, который нажимает пользователь. Я видел и могу справиться с простым воспроизведением, паузой, остановкой с помощью всего лишь одного элемента управления звуком, но мои навыки не дотягивают до того, чтобы кодировать что-то, чтобы делать то, что мне нужно, с кратными. Управление звуком - это аккуратное решение, которое хорошо сочетается с моим текущим дизайном, мне просто нужна помощь, чтобы он работал правильно. Вариант использования:

https://aberaeronskies.com/ страница загружается и ничего не воспроизводится, что требуется, пользователь нажимает кнопку воспроизведения на теге управления звуком и воспроизводится фрагмент дорожки, который требуется. Пользователь нажимает на другой (их 14), и он начинает играть, проблема в том, что первый все еще играет, что нежелательно; можно щелкнуть по всем из них, и они все сыграют!

Требуется сценарий, вызов или что-то еще (я не кодер, просто делаю это как freeb ie для помощника), что когда пользователь нажимает кнопку воспроизведения на любом из 14 треков, он приостанавливает все остальные воспроизводимые треки.

Я думал, что это так: Пауза всех остальных игроков, кроме активированного. jQuery аудио плагин для элемента и Воспроизведение выбранного аудио во время паузы / сброса других , но я не могу заставить их работать.

Возможно, этого не сделать и мне нужно переосмыслить всю презентацию нескольких треков, и если да, то будет полезен дальнейший совет о том, где искать (в дополнение к вышеупомянутому).

Большое спасибо ...

1 Ответ

0 голосов
/ 16 февраля 2020

Ах ... Это работает 

var curPlaying;
window.addEventListener("play", function(evt)
{
if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
{
    window.$_currentlyPlaying.pause();
} 
window.$_currentlyPlaying = evt.target;
}, true);
$(function () {
$(".playback").click(function (e) {
    e.preventDefault();
    var song = $(this).next('audio')[0];
    if (song.paused) {
        if (curPlaying) {
            $("audio", "#" + curPlaying)[0].pause();
        }
        song.play();
        curPlaying = $(this).parent()[0].id;
    } else {
        song.pause();
        curPlaying = null;
    }
});
});
...