JS - music box (finished)

最新推荐文章于 2022-08-02 16:21:39 发布

howlowl

最新推荐文章于 2022-08-02 16:21:39 发布

阅读量194

点赞数

分类专栏： WebDev

WebDev 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

document.querySelector("ul.player").addEventListener("click", function(e) {
    /* giving this element an ID. Now we can just check the document for the 
    existence of a player and if it does exist then I can do stuff to it. */
    var audioPlayer = document.querySelector("#player");
    if(audioPlayer) {
        var chosenSongSrc = e.target.getAttribute("data-src");
        if(chosenSongSrc == audioPlayer.src) {  // continue original song
            if(audioPlayer.paused) { 
                e.target.id = "playing";
                audioPlayer.play();
            } else {
                e.target.id = "paused";
                audioPlayer.pause();
            }           
        } else {  // switch song
            audioPlayer.pause();
            audioPlayer.src = chosenSongSrc;
            audioPlayer.play();
            if(document.querySelector("#playing")) {
                document.querySelector("#playing").id = "";
            } else {
                document.querySelector("#paused").id = "";
            }
            e.target.id = "playing";
        }

    } else {
        var audio = document.createElement("audio");
        audio.src = e.target.getAttribute("data-src");
        audio.id = "player";   // the audio element that plays music
        document.body.appendChild(audio);
        e.target.id = "playing";  // the thing you click on
        audio.play();
    
        audio.addEventListener('ended', function() {
            audio.parentNode.removeChild(audio);
            e.target.id = "";
        }, false);
    }

}, 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>

howlowl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS - music box (finished)

JSdocument.querySelector("ul.player").addEventListener("click", function(e) { /* giving this element an ID. Now we can just check the document for the existence of a player and if it does ...
复制链接

扫一扫

专栏目录