Playing the list of tracks, with the ability to stop / restart playing / stopping the player and simultaneously launch a new track

Question

W. connoisseurs! In front of me, the problem of realizing the playback of the track list on a click became unbreakable. Immediately make a reservation - I'm new, therefore, do not be surprised at my possible crutches.
I spent a huge amount of time on what would have been done so that when I clicked on any track link, the playing track would stop and immediately launch the one that was clicked. Alas, I did not succeed. At this stage, I need to first stop the current track and only then I can start any other. I hope to help the enlightened in this matter. Here is my code:

var musicLinksArr = [ "https://api.soundcloud.com/tracks/316952238/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952236/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952235/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952230/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952227/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952225/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952223/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175412/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175410/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175407/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175405/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175403/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175399/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175395/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb" ]; var musicStream = new Audio(); $(".tracks-list ul li div a").on("click", function() { var selectorId = this.id; var numberFilter = /\d+/g; var trackIndex = selectorId.match(numberFilter); if (musicStream.paused === true) { let currentTrack = trackIndex; musicStream.src = musicLinksArr[currentTrack]; musicStream.play(); } else { musicStream.pause(); } });

 li { list-style-type: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tracks-list"> <ul> <li> <div> <a href="#n0" class="track" id="musicPlay0">From Sorrow To Joy</a> </div> </li> <li> <div> <a href="#n1" class="track" id="musicPlay1">Higfly</a> </div> </li> <li> <div> <a href="#n2" class="track" id="musicPlay2">Not Forget</a> </div> </li> <li> <div> <a href="#n3" class="track" id="musicPlay3">Fall Of Phaeton</a> </div> </li> <li> <div> <a href="#n4" class="track" id="musicPlay4">Prevaling Sense</a> </div> </li> <li> <div> <a href="#n5" class="track" id="musicPlay5">Tender Sense</a> </div> </li> <li> <div> <a href="#n6" class="track" id="musicPlay6">Desperate Sense</a> </div> </li> </ul> </div>

A link to Peng with this example: https://codepen.io/Metalspell/pen/rojroO

Frankly speaking, I didn’t really understand what it means with the ability to stop / restart the player’s play / stop and simultaneously start a new track ?
And most importantly, should there be a case of simultaneous playback of more than one track?
If not, then it’s better to use only one audio element on the page, and when clicking on the corresponding track, just set a new src for it and start it again.
If you are interested in this option, I can write in the answer.
The ability to simultaneously play more than one track is excluded.
It is assumed that one track can be launched by clicking and its stop by repeated clicking on it.
When playing a specific track, when you click on another, the current playback should stop, and the track on which the click is made to start.
With great pleasure I would have looked at the implementation you proposed.

Accepted Answer · 2018-12-20T19:21:52

Do not use the <a></a> tag anywhere and how horrible. This is a link and use it as a link.

Sorry I do not like JQ , the answer is in the usual JS .

Further in the comments in the code I will describe what's what.

 //======добавляем удаляем класс чтобы видеть который играет == начало function changeClass(elem) { return elem.classList.contains('active') ? elem.classList.remove('active') : elem.classList.add('active'); } function removeClass(elem) { for (let index of elem) { index.classList.remove('active') } } //================= конец =================== var musicLinksArr = [ "https://api.soundcloud.com/tracks/316952238/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952236/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952235/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952230/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952227/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952225/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/316952223/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175412/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175410/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175407/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175405/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175403/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175399/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb", "https://api.soundcloud.com/tracks/344175395/stream?client_id=LvWovRaJZlWCHql0bISuum8Bd2KX79mb" ]; const musicStream = new Audio(); // можно не писать кучу элементов в html, а просто // создать один и потом клонировать его. let elem = document.createElement('li'); // На основе количества трекков (массив musicLinksArr) // мы клонируем тот самый созданный элемент (elem) musicLinksArr.forEach((s, i) => { let trecks = elem.cloneNode(true); trecks.classList.add('trecks'); trecks.innerHTML = 'Trecks' + i; document.querySelector('.tracks-list ul').appendChild(trecks); }) const button = document.querySelectorAll('button'); const li = document.querySelectorAll('li'); li.forEach((s, i) => { s.addEventListener('click', () => { if (musicStream.src !== musicLinksArr[i] && musicStream.paused) { // условие если дорожки не идентичны и муз не играет ===== musicStream.src = musicLinksArr[i]; musicStream.play(); changeClass(s); console.log('Первый раз'); //=========================================== } else if (musicStream.src === musicLinksArr[i] && !musicStream.paused) { // условие, если дорожки идентичны и муз играет ===== musicStream.pause(); changeClass(s) console.log('Пауза'); //=========================================== } else if (musicStream.src === musicLinksArr[i] && musicStream.paused) { // условие, если дорожки идентичны и муз не играет ===== musicStream.play(); changeClass(s) console.log('После паузы'); //=========================================== } else if (musicStream.src !== musicLinksArr[i] && !musicStream.paused) { // условие, если дорожки не идентичны и муз играет ===== removeClass(li); musicStream.src = musicLinksArr[i]; musicStream.play(); changeClass(s) console.log('Новый трек'); //=========================================== } }) })

 .tracks { background-color: grey; margin: 5px; padding: 5px; cursor: pointer; } .active { background-color: brown; }

 <div class="tracks-list"> <ul></ul> </div>

Having looked through your code, I, alas, did not understand how I could finish it, so that I could stop playing (stop / pause) Regarding the link tag - I’ll take into account)

Oleg Oleg 599 2 five · Answer 2 · 2018-12-21T21:54:47

An implementation with one audio element:

 <style> li:hover{ width: 100px; background: gold; cursor: pointer; } </style> <audio id=audio src="sound1.mp3" controls></audio> <ul> <li id="sound1.mp3">sound1</li> <li id="sound2.mp3">sound2</li> <li id="sound3.mp3">sound3</li> <li id="sound4.mp3">sound4</li> <li id="sound5.mp3">sound5</li> </ul> <script> var last = ""; var alles_li = document.getElementsByTagName("li"); for(var i = 0; i < alles_li.length; i++){ alles_li[i].onclick = function(){ if(this.id != last)audio.src = last = this.id; if(audio.paused){audio.play()}else{audio.pause()}; } } </script>

I drove this option to the hosting, here is the link On the example of sonnd2, you can see how it works.
If everything was normal, there should be no problems with this code, but apparently some unstable browsers have gone now, and besides the lack of autoplay, there is still a plug-in audio file found out, in other cases there is no unknown reason.
Therefore, sound1, 3 and 4 cause an error Uncaught (in promise) DOMException: despite the fact that there is no error in the code, and all the audio files are complete.

Playing the list of tracks, with the ability to stop / restart playing / stopping the player and simultaneously launch a new track

2 answers 2

More articles: