<ol class="music-player">
<li class="music-play-item">
<img
src="https://m.media-amazon.com/images/I/814Rp76DidL._SS500_.jpg"
alt="러브 엑스 마키나"
lang="ko"
class="music-album-cover"
/>
<div class="music-info">
<div class="music-info-detail">
<h1> <span lang="ko">러브 엑스 마키나</span> Love Ex Machina </h1>
<strong> MLSL (밀레니엄 살롱) </strong>
</div>
<span>
<span class="sr-only">Duration</span>
04:09
</span>
</div>
<audio src="./assets/music-1.mp3" class="music-audio"></audio>
</li>
<li class="music-play-item">
<img
src="http://image.genie.co.kr/Y/IMAGE/IMG_ARTIST/080/660/591/80660591_1560403300605_1_600x600.JPG"
alt="러브 엑스 마키나"
lang="ko"
class="music-album-cover"
/>
<div class="music-info">
<div class="music-info-detail">
<h1>올라가</h1>
<strong>권선홍</strong>
</div>
<span>
<span class="sr-only">Duration</span>
03:33
</span>
</div>
<audio src="./assets/music-1.mp3" class="music-audio"></audio>
</li>
</ol>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music Player</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<ol class="music-player">
<li class="music-play-item">
<img
src="https://m.media-amazon.com/images/I/814Rp76DidL._SS500_.jpg"
alt="러브 엑스 마키나"
lang="ko"
class="music-album-cover"
/>
<div class="music-info">
<div class="music-info-detail">
<h1> <span lang="ko">러브 엑스 마키나</span> Love Ex Machina </h1>
<strong> MLSL (밀레니엄 살롱) </strong>
</div>
<span>
<span class="sr-only">Duration</span>
04:09
</span>
</div>
<audio src="./assets/music-1.mp3" class="music-audio"></audio>
</li>
<li class="music-play-item">
<img
src="http://image.genie.co.kr/Y/IMAGE/IMG_ARTIST/080/660/591/80660591_1560403300605_1_600x600.JPG"
alt="러브 엑스 마키나"
lang="ko"
class="music-album-cover"
/>
<div class="music-info">
<div class="music-info-detail">
<h1>올라가</h1>
<strong>권선홍</strong>
</div>
<span>
<span class="sr-only">Duration</span>
03:33
</span>
</div>
<audio src="./assets/music-1.mp3" class="music-audio"></audio>
</li>
</ol>
</body>
<script src="./app.js"></script>
</html>
styles.css
* {
margin: 0;
box-sizing: border-box;
}
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #f8f9fa;
}
body::after {
content: 'frenchkebab©';
display: block;
margin-top: 50px;
color: #1f2d3d;
font-size: 12px;
font-weight: 600;
}
ul,
li {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.sr-only {
position: absolute;
top: -9999px;
left: -9999px;
z-index: -1;
width: 1px;
height: 1px;
overflow: hidden;
visibility: hidden;
}
.music-player {
width: 100%;
max-width: 540px;
padding: 20px;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.05);
}
.music-play-item {
position: relative;
display: flex;
align-items: center;
align-content: center;
width: 100%;
}
.music-album-cover {
width: 50px;
height: 50px;
border-radius: 3px;
margin-right: 16px;
}
.music-info {
flex-grow: 1;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
padding: 8px 0;
border-top: 1px solid #e5e5e5;
cursor: pointer;
}
.music-info * {
transition: opacity 120ms;
}
.music-info:hover * {
opacity: 0.6;
}
.music-play-item:last-child .music-info {
border-bottom: 1px solid #e5e5e5;
}
.music-info-detail * {
font-weight: 400;
}
.music-info-detail h1 {
font-size: 16px;
line-height: 1.2;
color: #383838;
}
.music-info-detail strong {
display: block;
font-size: 14px;
color: #8e8e93;
}
.music-playtime {
font-size: 14px;
color: #909095;
}
app.js
var musicPlayItems = document.querySelectorAll('.music-play-item');
musicPlayItems.forEach(function (item) {
item.isPlaying = false;
item.audio = item.querySelector('audio');
item.addEventListener('click', function () {
if (this.isPlaying) {
item.audio.pause();
item.audio.currentTime = 0;
} else {
item.audio.play();
}
item.isPlaying = !item.isPlaying;
});
});
태그 내에 lang 속성을 추가해 주도록 한다!