Как воспроизвести аудиофайлы из массива последовательно?

Question

[beta-it]

Алгоритм работы такой:
1. на стороне сервера генерирую mp3 файлы,
2. на клиент через ajax возвращаю массив ссылку на файл и его длину в секундах,
3. записываю их в массив js.

После этого в том же интервале что и вывожу массив пытаюсь проигрывать файлы из массива js последовательно, и удалить проигравший файл из массива, но вот здесь ни чего не получается, а может я вообще не в нужном направлении иду?

Вопрос в том как можно воспроизвести файлы последовательно без одновременного запуска?

var mp3List = [];

function show() {
    $.ajax({
        url: "/monitor/index",
        dataType: 'json',
        timeout: 2000,
        error: function () {
            console.log('error')
        },
        success: function (data) {
            if (data.data.audio.length != 0)
                mp3List.push(data.data.audio[0]);
        }
    });
}

function voise(list){
    if (list.length != 0) {
        var audio = new Audio(list[0]['name']);
        audio.play();
        setTimeout(function () {
            list.slice(0,1);
        }, list[0]['time']*1000);
    } else {
        console.log('Пустой лист с аудио');
    }
}

$(document).ready(function () {

    setInterval(function () {
        show();
        //console.log(mp3List);
        voise(mp3List);
    }, 4000);

});

Answer 1

[Данакт Фрост]

Вопрос в том как можно воспроизвести файлы последовательно без одновременного запуска?

У аудио-элемента есть событие «onended»

function play(list) {
    let audioElements = []
    
    for (let i = 0; i < list.length; i++) {
        var audio = new Audio(list[i]['name'])
        audioElements.push(audio)

        if (i === 0) {
            // Первое аудио запускаем
            audioElements[i].play()
        } else {
            // Остальные — после окончания предыдущего
            audioElements[i - 1].addEventListener('ended', function() {
                audioElements[i].play()

                list = list.slice(1)
            })
        }
    }
}

С асинхронными функциями в es7 можно как-нибудь так реализовать

async function voise(list) {
    for (let i = 0; i < list.length; i++) {
        const audio = new Audio(list[i]['name'])
        // Запускаем аудио и ждём, когда закончится
        await playAudio(audio)
    }
}

async function playAudio(audio) {
    audio.play()

    await new Promise((reject, resolve) => {
        audio.addEventListener('ended', () => {
            resolve()
        })

        audio.addEventListener('error', () => {
            reject()
        })
    })
}

Comments

[beta-it]

При запуске таким образом, равно начинает циклично проигрывать один и тот же звук, если убираю play() из интервала, и запускаю из консоли и передаю массив с 2 аудио второй не воспроизводится....

$(document).ready(function () {
    setInterval(function () {
        show();
        console.log(mp3List);
        play(mp3List);
    }, 4000);
});

[Данакт Фрост]

Aleksandr Semenov, поправил код, попробуйте

[beta-it]

Данакт Фрост, это я тоже заметил то что запись записывалась в массив ранее только 1.

audioElements[i - 1].addEventListener('ended', function() {
               <b> audioElements[i].play()</b> //на этом пункте ошибка валиться 

                list = list.slice(1)
            })

[Данакт Фрост]

Aleksandr Semenov, еще разок обновил

[beta-it]

Данакт Фрост, Спасибо.

[beta-it]

Данакт Фрост, не подскажите еще один момент, как при вызове ajax постоянном:

setInterval(function () {
        show();
        //console.log(mp3List);
        play(mp3List);
    }, 4000)

Звуки накладываются друг на друга, как этого можно избежать?

[Данакт Фрост]

Aleksandr Semenov, что значит накладываются?

[beta-it]

звук идет 12 секунд а частота вызова ajax 3 секунды и получается что каждый раз запускается play запускается заново.

[Данакт Фрост]

Aleksandr Semenov, а зачем вы каждый раз запускаете play?

[beta-it]

Данакт Фрост, потому что в зависимости от того поступили новые данные по ajax, мне необходимо их воспроизвести.

Вообще суть такая:
1. ajax запросы делаю к php где проверяю наличия изменений в БД.
2. Если изменения есть то необходимо проиграть один или два аудиоролика, в зависимости от того сколько их пришло, после воспроизведения каждого ролика вызвать еще один ajax метод для смены флага о том что этот ролик уже воспроизведен и его не нужно учитывать.
3. Если новых данных нет то ни чего не воспроизводить.

Как то так.