前端-音乐播放器界面

最新推荐文章于 2024-04-21 11:33:06 发布
最新推荐文章于 2024-04-21 11:33:06 发布
阅读量1.5k 收藏 17
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53821257/article/details/125469910
版权

功能说明：

       1.点击音乐可播放

       2.播放当前音乐可以将当前音乐的歌名以及歌手名在底部展示出来

       3.

   效果如下：

                         

当前专辑封面以及左下角图片为未播放音乐时的效果；

 播放当前音乐底部会显示当前歌名以及歌手名

                       

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>musicPlayer</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="page">
        <div class="header">歌曲列表</div>
        <div class="player">
            <div class="left-img">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="right-title">
                <p class="right-title-name">Courtship Dating</p>
                <p class="right-title-band">Crystal Castle</p>
            </div>
        </div>
        <div class="musiclist">
            <div class="playlist">
                <div class="playlist-left">Playlist</div>
                <div class="playlist-right"></div>

            </div>
            <div class="songlist">
                <ul>
                    <li class="song song1">
                        <div class="num">
                            <p>1</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Crimewaves
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=26814942.mp3</p>
                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song2">
                        <div class="num">
                            <p>2</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Knight
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=1400069740.mp3</p>
                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song3">
                        <div class="num">
                            <p>3</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Air War
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=3985818.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song4">
                        <div class="num">
                            <p>4</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Untrust Us
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=3985834.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>5</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Magic Spells
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=3985813.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>6</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Not In Love
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=17159482.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>7</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Reckless
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=1400069743.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>8</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Black Panther
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=1400069744.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>9</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Transgender
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=27142609.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                    <li class="song song1">
                        <div class="num">
                            <p>10</p>
                        </div>
                        <div class="song-right">
                            <div class="song-songname" style="font-size:1.7rem;">Air War
                            </div>
                            <div class="song-songsinger">Crystal Castles</div>
                            <p class="url">http://music.163.com/song/media/outer/url?id=27142609.mp3</p>

                        </div>
                        <div class="dot">...</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom-left">
                <img src="./img/2.jpg" alt="">
            </div>
            <div class="bottom-middle">
                <span class="name">Name:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <span class="singer">Singer:&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <audio id="audio" src="" controls></audio></div>
        </div>
    </div>
    <script src="./index.js"></script>
</body>

</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 10px;
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
}

.page {
    width: 100%;
    height: 100%;
}

.page .header {
    /* position: absolute; */
    width: 100%;
    height: 9rem;
    line-height: 9rem;
    font-size: 1.8rem;
    padding-left: 3.5rem;
}

.page .player {
    display: flex;
    width: 100%;
    height: 17rem;
}

.player .left-img {
    width: 16rem;
    height: 14rem;
    padding-left: 3rem;
}

.left-img img {
    width: 14rem;
    height: 100%;
    border-radius: 10%;
}

.right-title {
    flex: 1;
    height: 100%;
}

.right-title-name {
    font-size: 1.9rem;
    font-weight: 700;
    padding-top: 1.3rem;
}

.right-title-band {
    font-size: 1.4rem;
    font-weight: 200;
    padding-top: 0.7rem;
}

.musiclist {
    width: 100%;
    height: 50rem;
    overflow-y: scroll;
    padding-bottom: 19rem;
}

.playlist {
    display: flex;
    height: 3.2rem;
}

.playlist-left {
    width: 50%;
    height: 100%;
    font-size: 1.5rem;
    float: left;
    margin-left: 2rem;
    border-bottom: 0.1rem dashed gray;
}

.playlist-right {
    width: 50%;
    height: 100%;
    margin-right: 2rem;
    border-bottom: 0.1rem dashed gray;
}

.songlist {
    width: 100%;
    height: 100%;
}

.song {
    width: 100%;
    height: 6rem;
    display: flex;
    position: relative;
}

.song .num {
    width: 15%;
    height: 100%;
}

.song-right {
    margin: auto 0;
    vertical-align: bottom;
}

.song-right p {
    display: none;
}

.song p {
    line-height: 7rem;
    font-size: 1.6rem;
    text-align: center;
}

.song-songname {
    width: 100%;
}


/* .song-songname p {
    position: absolute;
    width: 100%;
    height: 3rem;
    font-size: 1.2rem;
    bottom: 0;
} */

.song-songsinger {
    width: 100%;
    /* padding-top: 2rem; */
}

.dot {
    width: 4rem;
    height: 2rem;
    position: absolute;
    font-size: 3rem;
    color: gray;
    top: 0.8rem;
    right: 0;
}

.bottom {
    width: 100%;
    height: 9rem;
    position: fixed;
    bottom: 0;
    background: white;
    /* z-index: 100; */
    display: flex;
}

.bottom-left {
    width: 20%;
    height: 100%;
}

.bottom-left img {
    width: 5rem;
    height: 5rem;
    padding-left: 3rem;
    padding-top: 2rem;
}

.bottom-middle {
    width: 80%;
    height: 100%;
    /* display: flex; */
}

.bottom-middle audio {
    padding-top: 0.5rem;
}

.bottom-middle .singer {
    overflow: hidden;
    padding-left: 1rem;
}

.bottom-middle .name {
    padding-left: 2rem;
}

 JS:

var url = document.getElementsByClassName('url')
var li = document.querySelectorAll('.song')
var audio = document.getElementById('audio')
var pict = document.getElementsByTagName('img')
var span1 = document.querySelector('.name')
var span2 = document.querySelector('.singer')


for (let i = 0; i < li.length; i++) {
    li[i].addEventListener('click', function(e) {
        console.log(e.path[1].children[2].outerText)
        audio.src = e.path[1].children[2].outerText
        audio.play();
        pict[1].src = arr[i].songPic
        span1.innerHTML = arr[i].name
        span2.innerHTML = arr[i].singer
    })
}



var arr = [{
        name: 'Crimewaves',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/zzM8vRwZRo4YfizdtqA9PQ==/1252343744071234.jpg?param=130y130'
    },
    {
        name: 'Knight',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/zzM8vRwZRo4YfizdtqA9PQ==/1252343744071234.jpg?param=130y130'
    },
    {
        name: 'Air War',
        singer: 'Crystal Castles',
        songPic: 'http://p1.music.126.net/1UbzdtmWSYJmAQDleK-Jrg==/1773512255609857.jpg?param=130y130'
    },
    {
        name: 'Untrust Us',
        singer: 'Crystal Castles',
        songPic: 'http://p1.music.126.net/1UbzdtmWSYJmAQDleK-Jrg==/1773512255609857.jpg?param=130y130'
    },
    {
        name: 'Magic Spells',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/mokWqOx7sYS2o7T6mvyB8A==/6650945837418683.jpg?param=130y130'
    },
    {
        name: 'Not In Love',
        singer: 'Crystal Castles',
        songPic: 'http://p1.music.126.net/4cmtXCljm-jENjg8oDhByw==/2542070884781418.jpg?param=130y130'
    },
    {
        name: 'Reckless',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/xQs3Dfz4eFwC05Bi_TDFkg==/1282030558024374.jpg?param=120y120'
    },
    {
        name: 'Black Panther',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/xJfKLTrdD7whHygBpDqeVQ==/109951164458089137.jpg?param=130y130'
    },
    {
        name: 'Transgender',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/LuMYB1SlbmTeL8tEzggONw==/109951166568071646.jpg?param=120y120'
    },
    {
        name: '',
        singer: 'Crystal Castles',
        songPic: 'http://p2.music.126.net/xJfKLTrdD7whHygBpDqeVQ==/109951164458089137.jpg?param=130y130'
    }
]

注：音乐链接以及图片链接均来自wyymusic

航航不脱发
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
HTML+CSS系列实战之音乐播放器实现
m0_70646869的博客
05-09 617
<!doctype html> 音乐播放页面 浏览器不支持video标签 风中的麦浪 爱过的地方 当微风带着收获的味道 吹向我脸庞 想起你轻柔的话语曾打湿我眼眶嗯…啦…嗯…啦…我们曾在田野里歌唱在冬季盼望却没能等到阳光下 css样式为:(music.css) @charset “utf-8”; /* CSS Document */ /清除浏览器默认样式/ *{ margin:0; padding:0; } /整体控制音乐播放界面/ #box-video{ widt
前端 用HTML，CSS, JS 写一个简易的音乐播放器
aisheisadas的博客
10-31 2660
这个实现了基本的播放/暂停、歌曲切换、音量控制、进度条控制和显示歌曲信息等功能，同时还支持播放模式切换和歌曲列表操作。这些功能的实现需要涉及到不同的技术和工具，如 AJAX、WebSocket、React、Node.js 等。如果你想要深入学习和掌握 Web 开发技术，可以选择相应的学习路径和教程进行学习。
前端提高篇(六十五)：HTML5练习1：个性音乐播放器（二
2401_84003839的博客
04-02 435
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》
HTML+CSS系列实战之音乐播放器实现，前端面试心得必备技能储备详解
最新发布
sahtk89452的博客
04-21 1146
资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。空(void)元素有那些？cookies,sessionStorage,localStorage 的区别？了解 this 嘛，bind，call，apply 具体指什么。serviceWorker的使用原理是啥？箭头函数和普通函数有啥区别？Canvas 和 SVG 图形的区别是什么？如何实现浏览器内多个标签页之间的通信？HTML5 的离线储存的使用和原理？简述⼀下src与href的区别？
WEB版 音乐播放器
qq_52157198的博客
09-27 2214
利用vue2实现web版音乐播放器的大致思路和方法。
推荐一款开源音乐播放器：YesPlayMusic
gitblog_00041的博客
03-19 391
推荐一款开源音乐播放器：YesPlayMusic 项目地址:https://gitcode.com/qier222/YesPlayMusic 项目简介 YesPlayMusic 是一个由 qier222 开发并维护的开源在线音乐播放器。通过该项目的 GitCode仓库，您可以获取源代码并了解其最新进展。这款应用提供了丰富的功能和自定义选项，旨在为用户提供优质的音乐体验。 技术分析 前端 YesPl...
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）
网页设计与制作
11-11 8482
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）
热门推荐
qq_44210563的博客
10-30 11万+
今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
原生JavaScript代码实现QQ音乐前端效果
u013110812的专栏
09-20 1367
第一次写技术博客，难免有些激动，嘿嘿。
微信小程序-音乐播放器源码
06-12
总的来说，这个“微信小程序-音乐播放器源码”项目涵盖了前端开发中的数据绑定、事件处理、网络请求、本地存储、用户交互等多个重要知识点，对于学习微信小程序开发是非常有价值的实践案例。通过深入研究并理解源码...
web前端开发音乐播放器网页代码
03-21
在本项目中，"web前端开发音乐播放器网页代码"，我们主要会探讨以下几个关键知识点： 1. **HTML结构**： 音乐播放器的HTML结构通常包括播放/暂停按钮、进度条、音量控制、歌曲列表、封面图片和播放时间等元素。...
音乐：前端训练项目-音乐播放器
02-20
在这个项目中，我们将主要关注JavaScript技术的应用，以及如何构建一个功能完善的音乐播放器界面。 1. **HTML5 Audio元素** HTML5 Audio元素是实现音乐播放器的基础。通过`<audio>`标签，我们可以嵌入音频文件并在...
vue项目-音乐播放器
06-06
在这个“vue项目-音乐播放器”中，我们可以看到开发者利用Vue.js构建了一个基本的音乐播放器应用，这展示了Vue.js在实际项目中的应用，特别是对于移动端界面的开发。 首先，Vue.js的核心特性包括数据绑定（`v-bind`...
爬虫脚本项目源码-音乐播放器
02-27
在本项目中，“爬虫脚本项目源码-音乐播放器”主要涵盖了使用Python编程语言进行网络数据抓取，特别是音乐播放器相关的数据，来构建一个功能性的音乐播放平台。这个项目结合了爬虫技术与音乐播放器的开发，旨在为...
纯前端语言编写音乐播放器
CodingPeasan的博客
08-23 1978
纯前端语言编写音乐播放器 html代码 index.html <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
HTML5打造的炫酷本地音乐播放器-喵喵Player
weixin_34023982的博客
02-26 334
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器（Meow meow Player,额知道这名字很二很装萌~），全HTML5打造的网页程序，可本地运行也可以挂服务器上用。   在线Demo及源码 你可以访问下面的地址打开在线demo： http://wayou.github.io/MeowmeowPlayer/ 项目github地址： https://github.c...
用vue+flask做了个音乐播放器（前端部分）
Aasee的博客
05-03 2625
这段时间突然脑子一热打算做一个音乐播放器玩玩，于是就诞生了这个玩意。
HTML网页调用 网易云 音乐播放器代码
YFCMS博客
12-05 5万+
表现形式一：单曲播放 调用代码： &amp;lt;iframe frameborder=&quot;no&quot; border=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; width=100% height=86 src=&quot;http://music.163.com/outchain/player?type=2&am
原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）
m0_74222549的博客
03-23 6823
话不多说，下面进入到h5页面的代码。
web前端毕设项目-Vue音乐播放器
07-28
你好！对于你的毕设项目，一个Vue音乐播放器是一个很好的选择。你可以使用Vue.js框架来构建前端部分，同时结合其他技术来实现音乐播放功能。 首先，你可以使用Vue CLI来创建一个新的Vue项目。在项目中，你可以使用Vue Router来实现页面的导航和路由。你可以创建不同的页面组件，如音乐列表、音乐播放器等。 接下来，你需要考虑如何获取音乐数据。你可以使用第三方的音乐API来获取音乐列表和歌曲信息。一些流行的音乐API包括网易云音乐API、QQ音乐API等。通过调用这些API，你可以获取音乐列表、歌曲详情、歌词等信息。 在音乐播放器界面，你可以使用Vue的组件化开发思想，将播放器拆分为多个子组件，如播放按钮、进度条、音量控制等。通过Vue的数据绑定和事件监听，实现播放、暂停、调整进度等功能。 此外，你还可以考虑使用第三方的音乐播放器插件，如APlayer、Howler.js等。这些插件提供了丰富的音乐播放功能，并且可以与Vue进行集成。 最后，记得进行样式设计，使你的音乐播放器具有良好的用户界面和用户体验。你可以使用CSS框架如Bootstrap或Element UI来加快开发速度，或者自定义样式来满足你的需求。 希望这些建议能对你的毕设项目有所帮助！如果有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

航航不脱发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值