Не удаётся отследить изменения в

Question

Доброго времени суток друзья. Решил создать аудио-альбом, с плейлистами (php+Mysql) ну и... ajax знаю как отправлять-принимать запросы, обновлять див. При создании нашел скриптец запрещающий воспроизведение сразу нескольких аудиозаписей, а так же начинающий следующую дорожку по завершении текущей. (вывожу их просто тегами ).

Всё было хорошо до тех самых пор пока не начал придумывать, внедрять плейлисты. Столкнулся с проблемой которую решить не смог. Этот волшебный скрипт при обновлении блока <div id="audiodiv">..тут и выводятся аудио.. </div> прекращает свою работу. страничка выглядит вот таким образом:

(кнопочка плейлиста onklick="audiorefresh")(кнопочка плейлиста onklick="audiorefresh")
       <div id="audiodiv">
SQLзапрос, далее циклом вывожу аудиозаписи и выглядят они так:
<div>
<div> Название песенки </div>
<audio>
</div>

<div>
<div> Название песенки </div>
<audio>
</div>

<div>
<div> Название песенки </div>
<audio>
</div>

        </div>

Далее волшебный скрипт:
<script><?php  //Для того, что бы нельзя было запустить несколько песен одновременно ?>
let audioNL = document.querySelectorAll('audio');
let audio = Array.apply(null, audioNL);
audio.forEach(t => {
 let index = audio.indexOf(t);
   t.addEventListener('play', ()=> {
       audio.forEach(subT => {
          subT !== audio[index] ?
            (subT.pause(), subT.currentTime = 0) :
                    subT.play()
                })
            })
            t.addEventListener('ended', ()=> {
                t.currentTime = 0;
                index !== audio.length - 1 ?
                    audio[index + 1].play() :
                    audio[0].play()
            })
        });
</script>

и аджакс получающий значения кнопок плейлистов и передающий эти значения моему скрипту php, так же получающий их и пишущий в этот самый #audiodiv

<script>//refresh playlist
function refresh_playlist(pl) {
 $('#audiodiv').empty();
        $.ajax({
        url:'ajax/refreshpl.php',
        type:'POST',
        cash: false,
        data: {'pl' : pl},
        dataType: 'html',
        success: function(data) {
                $('#audiodiv').html(data);
         }
    });
}
</script>

Вычитал и про Mutation Observer тоже. Пробовал посадить данный волшебный скрипт на него. Но в общем и целом все мои попытки оказались напрасными. Я с ним никогда не работал может писал что не правильно. Или может кроме jQuery библиотеки ещё что-либо требовалось подключить. В общем зашел в тупик. Не могу решить задачу. Прошу помощи советом, примером.

Answer 1

Всё заработало, благодаря Stepan Kasyanenko (в комментариях под вопросом). Сделал всё, как написал. код выглядит так:

<script><?php  //Для того, что бы нельзя было запустить несколько песен одновременно ?>
        function nextsong(){
        let audioNL = document.querySelectorAll('audio');
        let audio = Array.apply(null, audioNL);
        audio.forEach(t => {
            let index = audio.indexOf(t);
            t.addEventListener('play', ()=> {
                audio.forEach(subT => {
                    subT !== audio[index] ?
                    (subT.pause(), subT.currentTime = 0) :
                    subT.play()
                })
            })
            t.addEventListener('ended', ()=> {
                t.currentTime = 0;
                index !== audio.length - 1 ?
                    audio[index + 1].play() :
                    audio[0].play()
            })
        });
        };
    </script>




<script>//refresh playlist
function refresh_playlist(refreshplaylist) {
 $('#audiodiv').empty();
        $.ajax({
        url:'ajax/refresh_pl.php',
        type:'POST',
        cash: false,
        data: {'pl' : pl},
        dataType: 'html',
        success: function(data) {
                $('#audiodiv').html(data);
                nextsong();
         }
    });
}
</script>

БЛОГ НА HUSL

Не удаётся отследить изменения в

Ответы (1 шт):