Блог

У меня есть список из многих песен в списке воспроизведения, и я хочу отображать другой текст всякий раз, когда каждая песня воспроизводится при использовании одной и той же области страницы. Если песни не воспроизводятся, область остается пустой.

Как бы мне сделать это довольно просто?

Это код, который у меня есть, я не включил полный список:

 <ul>
    <li><a class="active" href="#music">Music that reminds of you</a></li>
    <li><a href="#Message">Messagse to you</a></li>
</ul>

<audio  id="audio" preload="auto" tabindex="0" controls="" >
    <source src='C:Usersleen_DesktopVALEYmusicSleeping At Last - Saturn.mp3'>
    </audio>
<div id="musicPlaylist" class="playlist">
    <ul id="playlist">
        <li class="activeSong">
            <a onclick="myFunction()" id = "Saturn" href='...Saturn.mp3'>
                Saturn
            </a>
        </li>
        <li>
            <a href='...closer .mp3'>
                Closer
            </a>
        </li> 
    </ul>
</div>
  

и затем это

 <script>
    var audio;
    var playlist;
    var tracks;
    var current;
    
    init();
    function init(){
        current = 0;
        audio = $('#audio');
        playlist = $('#playlist');
        tracks = playlist.find('li a');
        len = tracks.length;
        audio[0].volume = .50;
        audio[0].play();
        playlist.find('a').click(function(e){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, audio[0]);
        });
        audio[0].addEventListener('ended',function(e){
            current  ;
            if(current == len){
                current = 0;
                link = playlist.find('a')[0];
            }
            else{
                link = playlist.find('a')[current];
            }
            run($(link),audio[0]);
        });
    }
    function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
    }
    
</script>