Форум

Борис К · #1 (**permalink**) 23.06.2021, 00:43

Здравствуйте!
Пожалуйста, помогите с созданием <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!!!

рони · #2 (**permalink**) 23.06.2021, 09:13

Борис К,

<!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>

Борис К · #3 (**permalink**) 23.06.2021, 10:20

рони,
Рони, большое спасибо за оперативный ответ!
Но, видимо, я не совсем верно пояснил проблему: <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">, но задуманное упорно не заработало(((
Извините, если, что не так... но в любом случае моя благодарность Вам!

рони · #4 (**permalink**) 23.06.2021, 10:22

Борис К,

<!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>

Борис К · #5 (**permalink**) 23.06.2021, 10:30

рони,
Маг и Волшебник!
Я в который раз глубоко тронут вашим высокопрофессионализмом!
Огромная благодарность!!!

Борис К · #6 (**permalink**) 31.07.2021, 10:07

Рони, подскажите, пожалуйста, а что необходимо сделать, чтобы нижепредставленный код сразу срабатывал (без клика на 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>

рони · #7 (**permalink**) 31.07.2021, 11:18

Сообщение от Борис К

что необходимо сделать, чтобы нижепредставленный код сразу срабатывал (без клика на playlist'е при открытии странички):

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

Борис К · #8 (**permalink**) 31.07.2021, 11:34

Рони, искренне благодарю за оперативный ответ!)

Форум

Справочник

Discord чат

Курсы javascript