Обрабатывать несколько экземпляров HTMLAudioElement и их свойства - PullRequest
Новая
       46

Обрабатывать несколько экземпляров HTMLAudioElement и их свойства

0 голосов
/ 29 апреля 2020

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

Это PHP, генерирующий страницу (выдержка, значения для создания проигрывателя передаются): 

<script>
    var player = createSimpleAudioplayer("' . $id . '", "' . $mp3 . '", "' . $ogg . '");
    if(typeof(SimpleAudioplayers) === "undefined") {
        var SimpleAudioplayers = new Array();
        SimpleAudioplayers.push(player);
    } else {
        SimpleAudioplayers.push(player);
    }
</script>

Это помогает мне сохранить коллекцию моих экземпляров HTMLAudioElement, и я подумал, что теперь будет легко получить к ним доступ.

Мой JS для создания экземпляра выглядит так (_canOGG устанавливается вспомогательной функцией снаружи): 

function createSimpleAudioplayer(player, mp3, ogg) {
    var audio = new Audio();
    audio.id = player;

    var _MP3 = mp3;
    var _OGG = ogg;

    if(_canOGG && (_OGG.length > 0)) {
        // seems like we have an OGG file and OGG support
        // will use OGG then, for its better compression
        audio.src = _OGG;
    } else {
        // fallback to MP3 which is universally supported
        audio.src = _MP3;
    }

    return audio;
}

Я создал обработчики событий, которые фиксируют щелчки на элементах проигрывателя (SVG, поэтому путь продолжается): 

document.addEventListener('click', function(e) {
    if(e.target.localName === 'path') { e = e.target.parentElement; } else { e = e.target; }
    if(e.getAttribute('class') == 'btn-play') { playAudio(e); }
    if(e.getAttribute('class') == 'btn-pause') { pauseAudio(e); }
    if(e.getAttribute('class') == 'btn-stop') { stopAudio(e); }
    if(e.getAttribute('class') == 'btn-vol-down') { volumeDown(e); }
    if(e.getAttribute('class') == 'btn-vol-up') { volumeUp(e); }
 });

И, например, функция воспроизведения, все остальные функции работают почти одинаково: 

function playAudio(e) {
    var _id = e.parentElement.parentElement.getAttribute('id');
    var _player = SimpleAudioplayers.find(element => element.id = _id);
    _player.play();
    document.querySelectorAll('#' + _id + ' .btn-play')[0].style.display = 'none';
    document.querySelectorAll('#' + _id + ' .btn-pause')[0].style.display = 'inherit';
}

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

audio должна быть локальной переменной внутри объекта / конструктор, но кажется, что он распределяется между всеми ними. Чего мне не хватает?

...