0
В эти дни я изучаю Javascript Events при создании приложения для воспроизведения мультимедиа через события javascript, я не понимал условия, используемые в этой программе/коде, я просто хочу очистить свою концепцию от этих, если еще условия в этом коде, что музыка играла и останавливалась, используя это, если еще условия?События Javascript
var jukeBox = document.querySelector('ul.player');
jukeBox.addEventListener('click', function(e) {
var songName = e.target.getAttribute('data-src');
var songPlaying = document.querySelector('#player');
if(songPlaying){
if(songPlaying.paused){
songPlaying.play();
e.target.id = 'playing';
}else{
songPlaying.pause();
e.target.id = 'pause';
}
}else{
var audioPlayer = document.createElement('audio');
audioPlayer.id = 'player';
audioPlayer.src = songName;
document.body.appendChild(audioPlayer);
audioPlayer.play();
e.target.id = 'playing';
}
}, false);body {
font: normal 15px/15px Helvetica;
background: #259286;
}
ul.player {
width: 180px;
margin: 0 auto;
margin-top: 100px;
list-style: none;
}
ul.player li {
border-bottom: 1px solid #999;
color: #444;
padding: 9px 5px 10px 40px;
background: url(images/media_btn.png) no-repeat 8px 7px;
background-color: #EAE3CB;
background-position: 9px 4px;
cursor: pointer;
}
ul.player li:first-child {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top: none;
}
ul.player li:last-child {
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom: none;
}
ul.player li:hover {
background-color: #475B62;
color: #FCF4DC;
}
ul.player li#playing {
background: url(images/media_play_btn.png) no-repeat 8px 7px;
background-color: #FCF4DC;
color: #2176C7;
font-weight: bold;
background-position: 9px 4px;
}
ul.player li#paused {
background: url(images/media_pause_btn.png) no-repeat 8px 7px;
background-color: #666;
color: #FFF;
font-weight: bold;
background-position: 9px 4px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Events</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul class="player">
<li data-src="audio/Phoebex.mp3">Phoebex</li>
<li data-src="audio/AmazingLee.mp3">AmazingLee</li>
<li data-src="audio/NightKitty.mp3">Night Kitty</li>
<li data-src="audio/EqueKenox.mp3">Eque Kenox</li>
<li data-src="audio/Shiloah.mp3">Shiloah</li>
</ul>
<script src="script.js"></script>
</body>
</html>
В какой части вы не понимаете? Когда щелчок происходит где-то внутри списка композиций, обработчик проверяет, есть ли аудио-элемент с идентификатором 'player'. Если ни один элемент не найден на странице, songPlaying будет пустым, и, следовательно, 'if (songPlaying)' is false, что создаст новый аудио-элемент и добавит его на страницу. Если аудио-элемент уже находится на странице, внутренний if/else проверяет, играет ли эта звуковая песня или нет, и делает противоположное действие. Таким образом, щелчок по списку будет либо создавать/начинать песню, либо приостанавливать/перезапускать песню. – Shilly