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

打开index.html和内部从编写基本的 HTML 结构开始。还链接style.css和两个 JS 文件。记得data.js在app.js. 否则我们将无法访问数据。

完成链接所有文件后，让我们创建第一件事。图像轮播。内部身体标签代码这个。

注意 - 将旋转木马包裹在home-section元素内。

@import url(‘https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap’);

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root{

–background: #141414;

–text-color: #fff;

–primary-color: #63ff69;

–secondary-color: #000;

–alpha-color: rgba(0, 0, 0, 0.5);

–shadow: 0 15px 40px var(–alpha-color);

}

html{

background: var(–background);

display: flex;

justify-content: center;

}

body{

width: 100%;

height: 100vh;

max-width: 375px;

position: relative;

background: var(–background);

font-family: ‘roboto’, sans-serif;

color: var(–text-color);

}

::-webkit-scrollbar{

display: none;

}

.home-section{

width: 100%;

padding: 20px;

height: 100%;

padding-bottom: 100px;

overflow-y: auto;

}

/* carousel */

.carousel{

width: 100%;

height: 200px;

overflow: hidden;

border-radius: 20px;

box-shadow: var(–shadow);

position: relative;

}

.carousel img{

position: absolute;

width: 100%;

height: 100%;

object-fit: cover;

opacity: 0;

transition: 1s;

}

.carousel img.active{

opacity: 1;

}

您可以看到我们在这里使用了 CSS 变量，因此我们将来可以轻松更改此音乐播放器主题。

输出

请注意，这是为移动视图设计的，这就是为什么我使用 chrome 检查器以移动尺寸查看它的原因。

现在创建水平滚动播放列表。放在home-section里面

HTML

最近播放

华语热歌

古风戏腔

//+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;

}

输出

我们完成了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类。

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