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

---

在我们开始编写代码之前。虽然它不是 Nodejs 应用程序，但我们至少应该看到它的文件夹结构。

你可以看到我们有一个data.js文件，该文件包含我们的音乐相关数据。你可以在下面看到。

let songs = [

    {

        name: 'song 1',

        path: 'assets/musics/Song 1.mp3',

        artist: 'artist 1',

        cover: 'assets/images/cover 1.png'

    },

    {

        name: 'song 2',

        path: 'assets/musics/Song 2.mp3',

        artist: 'artist 2',

        cover: 'assets/images/cover 2.png'

    },

    // 剩下8首歌曲格式同上

]

我们在这里存储了音乐相关数据。

然后现在让我们对主页部分进行编码。

🎯 home-section 首页部分

---

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

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

<section class="home-section">

    <div class="carousel">

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

        <img src="assets/images/cover 2.png" alt="">

        <img src="assets/images/cover 3.png" alt="">

        <img src="assets/images/cover 4.png" alt="">

        <img src="assets/images/cover 5.png" alt="">

    </div>

</section>

注意 - 将旋转木马包裹在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

<h1 class="heading">最近播放</h1>

<div class="playlists-group">

	<