Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.06.2021, 00:43
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 28

Создание 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!!!
Ответить с цитированием
  #2 (permalink)  
Старый 23.06.2021, 09:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

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>
Ответить с цитированием
  #3 (permalink)  
Старый 23.06.2021, 10:20
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 28

рони,
Рони, большое спасибо за оперативный ответ!
Но, видимо, я не совсем верно пояснил проблему: <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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

Борис К,
<!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
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 28

рони,
Маг и Волшебник!
Я в который раз глубоко тронут вашим высокопрофессионализмом!
Огромная благодарность!!!
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2021, 10:07
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 28

Рони, подскажите, пожалуйста, а что необходимо сделать, чтобы нижепредставленный код сразу срабатывал (без клика на 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

Сообщение от Борис К
что необходимо сделать, чтобы нижепредставленный код сразу срабатывал (без клика на playlist'е при открытии странички):
не знаю, может быть кто-то другой подскажет, но по умолчанию если со страницей не было взаимодействия, работа плеера запрещена.
Ответить с цитированием
  #8 (permalink)  
Старый 31.07.2021, 11:34
Интересующийся
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 28

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание функции в цикле, замыкания, промисы fjay69 Общие вопросы Javascript 4 22.02.2020 15:13
Создание landing page, web-приложений на C#, сайтов под ключ на PHP MidGold Работа 4 26.03.2019 03:13
Создание, продвижение и оптимизация сайта Evgenij83 Работа 0 10.06.2017 17:23
Создание своей библиотеки. Создание двух одинаковых объектов. Как избежать? IDCh Javascript под браузер 2 31.10.2012 10:53
Создание скрипта "Итеррационные циклы" по формуле krasopetka Общие вопросы Javascript 0 17.11.2011 10:42