Создание playlist'а по аналогии
Здравствуйте!
Пожалуйста, помогите с созданием <ul id="playlist#2"> по аналогии с <ul id="playlist#1">: при нажатии на "#1" поочерёдно выделяются жирным строки "playlist#1" с воспроизведением аудио. Не могу добиться такого же эффекта с "playlist#2" при нажатии на "#3": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .selected { font-weight: bold } </style> </head> <body> <audio id="player"></audio> <ul id="playlist#1"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3">#1</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3">#2</li></ul> <ul id="playlist#2"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3">#3</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3">#4</li></ul> <script type="text/javascript"> // globals var _player = document.getElementById("player"), _playlist = document.getElementById("playlist#1"); // functions function playlistItemClick(clickedElement) { var selected = _playlist.querySelector(".selected"); if (selected) { selected.classList.remove("selected"); } clickedElement.classList.add("selected"); _player.src = clickedElement.getAttribute("data-ogg"); _player.play(); } function playNext() { var selected = _playlist.querySelector("li.selected"); if (selected && selected.nextSibling) { playlistItemClick(selected.nextSibling); } } // event listeners _player.addEventListener("ended", playNext); _playlist.addEventListener("click", function (e) { if (e.target && e.target.nodeName === "LI") { playlistItemClick(e.target); } }); </script> </body> </html> P.S. Понимаю, что надо по аналогии продублировать javascript для "playlist#2", но самостоятельно справится не получается... Please, help me!!! |
audio playlist next
Борис К,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .selected { font-weight: bold } </style> </head> <body> <audio id="player"></audio> <ul class="playlist"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3">#1</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3">#2</li></ul> <ul class="playlist"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3">#3</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3">#4</li></ul> <script type="text/javascript"> // globals let _player = document.getElementById("player"); let _sounds = [...document.querySelectorAll(".playlist [data-ogg]")]; let _current = _sounds[0]; // functions function playlistItemClick(clickedElement) { if (_current) { _current.classList.remove("selected"); } clickedElement.classList.add("selected"); _current = clickedElement; _player.pause(); _player.src = clickedElement.dataset.ogg; _player.play(); } function playNext() { let i = _sounds.indexOf(_current); //i = ++i % _sounds.length; i = Math.min(++i, _sounds.length - 1); let next = _sounds[i] if(next != _current) playlistItemClick(next); } // event listeners _player.addEventListener("ended", playNext); document.addEventListener("click", function (e) { if (e.target && e.target.closest(".playlist [data-ogg]")) { playlistItemClick(e.target); } }); </script> </body> </html> |
рони,
Рони, большое спасибо за оперативный ответ! Но, видимо, я не совсем верно пояснил проблему: <ul id="playlist#2"> не должен продолжать выделение списка жирным и воспроизведение аудио вслед за <ul id="playlist#1"> - <ul id="playlist#1"> и <ul id="playlist#2"> должны функционировать независимо друг от друга... при нажатии на "#1" должны поочерёдно выделяться жирным торлько строки "#1" и "#2" с воспроизведением аудио, отдельно при нажатии на "#3" должны выделяться только "#3" и "#4" с воспроизведение соответствующего им аудио. Повторюсь, в приведённом мною коде, я создавал отдельно javascript для <ul id="playlist#2">, но задуманное упорно не заработало((( Извините, если, что не так... но в любом случае моя благодарность Вам! |
Борис К,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .selected { font-weight: bold } </style> </head> <body> <audio id="player"></audio> <ul class="playlist"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3">#1</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3">#2</li></ul> <ul class="playlist"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3">#3</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3">#4</li></ul> <script type="text/javascript"> // globals let _player = document.getElementById("player"); let _current; // functions function playlistItemClick(clickedElement) { if (_current) { _current.classList.remove("selected"); } clickedElement.classList.add("selected"); _current = clickedElement; _player.pause(); _player.src = clickedElement.dataset.ogg; _player.play(); } function playNext() { let _sounds = [..._current.parentNode.querySelectorAll("[data-ogg]")]; let i = _sounds.indexOf(_current); //i = ++i % _sounds.length; i = Math.min(++i, _sounds.length - 1); let next = _sounds[i] if(next != _current) playlistItemClick(next); } // event listeners _player.addEventListener("ended", playNext); document.addEventListener("click", function (e) { if (e.target && e.target.closest(".playlist [data-ogg]")) { playlistItemClick(e.target); } }); </script> </body> </html> |
рони,
Маг и Волшебник! Я в который раз глубоко тронут вашим высокопрофессионализмом! Огромная благодарность!!! |
Рони, подскажите, пожалуйста, а что необходимо сделать, чтобы нижепредставленный код сразу срабатывал (без клика на playlist'е при открытии странички):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <audio id="player"></audio> <ul class="playlist"><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3">#1</li><li data-ogg="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3">#2</li></ul> <script type="text/javascript"> // globals let _player = document.getElementById("player"); let _current; // functions function playlistItemClick(clickedElement) { if (_current) { _current.classList.remove("selected"); } clickedElement.classList.add("selected"); _current = clickedElement; _player.pause(); _player.src = clickedElement.dataset.ogg; _player.play(); } function playNext() { let _sounds = [..._current.parentNode.querySelectorAll("[data-ogg]")]; let i = _sounds.indexOf(_current); //i = ++i % _sounds.length; i = Math.min(++i, _sounds.length - 1); let next = _sounds[i] if(next != _current) playlistItemClick(next); } // event listeners _player.addEventListener("ended", playNext); document.addEventListener("click", function (e) { if (e.target && e.target.closest(".playlist [data-ogg]")) { playlistItemClick(e.target); } }); </script> </body> </html> |
Цитата:
|
Рони, искренне благодарю за оперативный ответ!)
|
Часовой пояс GMT +3, время: 00:23. |