使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)_网页音乐播放器源码(1)

</div>
<div class="playlist-card">
	<img src="assets/images/cover 2.png" class="playlist-card-img" alt="">
	<p class="playlist-card-name">古风戏腔</p>
</div>
//+3 

根据你的喜好

失恋回忆

经典老歌

//+3

**CSS**

.heading{
margin: 30px 0 10px;
text-transform: capitalize;
font-weight: 400;
font-size: 30px;
}

/* playlists card */

.playlists-group{
position: relative;
width: 100%;
min-height: 200px;
height: auto;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}

.playlist-card{
flex: 0 0 auto;
max-width: 150px;
height: 100%;
margin-right: 20px;
}

.playlist-card-img{
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 20px;
}

.playlist-card-name{
width: 100%;
text-align: justify;
font-size: 20px;
text-transform: capitalize;
padding: 5px;
}

**输出**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/975b293d1475474a896ea93802835e18.png)


我们完成了`home section`。但是我们的旋转木马还不起作用，所以让我们使用 js 让它工作。打开app.js文件并开始编码。

const carousel = […document.querySelectorAll(‘.carousel img’)];

let carouselImageIndex = 0;

const changeCarousel = () => {
carousel[carouselImageIndex].classList.toggle(‘active’);

if(carouselImageIndex >= carousel.length - 1){
    carouselImageIndex = 0;
} else{
    carouselImageIndex++;
}

carousel[carouselImageIndex].classList.toggle('active');

}

setInterval(() => {
changeCarousel();
}, 3000);

您可以看到我们的轮播元素，每 3 秒切换一次图像active类。


![在这里插入图片描述](https://img-blog.csdnimg.cn/5eea9a8c0f024c0eb9173622593677ef.gif)


现在让我们制作我们的播放器部分。


### 🍖 player-section 播放器部分


首先使其最小化视图。

<img src="assets/images/back.png" class="back-btn icon hide" alt="">
<img src="assets/images/nav.png" class="nav-btn icon hide" alt="">

<h1 class="current-song-name">song 1</h1>
<p class="artist-name hide">artist 1</p>

<img src="assets/images/cover 1.png" class="cover hide" alt="">

<div class="seek-bar-container">
    <input type="range" class="music-seek-bar" value="0">
    <p class="current-time hide"