JS制作音乐播放器并高亮歌词滚动以及按钮暂停播放切歌
2024-06-01 11:16:57
简介:高亮歌词这里需要说一个文件，也就是.lrc文件，这个功能制作是将文件中时间与音乐文件中播放的进度作比较，实现文件何时滚动换行以及高亮的，好了看代码（我的歌曲文件是周总的《等你下课》）
css代码:
.container {width: 340px;height: 500px;border: 2px solid black;border-radius: 5px;display: flex;flex-direction: column;}.img {width: 150px;height: 150px;border: 1px solid cyan;border-radius: 10px;margin: 20px auto;}.container .box {flex: 1;overflow: hidden;}ul {overflow: hidden;transition-duration: 600ms;}ul,li {list-style: none;padding: 0;margin: 0;font-size: 16px;font-weight: bold;}li.on {background-image: -webkit-linear-gradient(right, red, blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}p {overflow: hidden;text-overflow: ellipsis;height: 16px;line-height: 16px;-webkit-line-clamp: 1;-webkit-box-orient: vertical;display: -webkit-box;text-align: center;margin-top: 0;margin-bottom: 16px;}audio {margin-top: 10px;}html代码：
<div class="container"><div class="img"></div><div class="box"><ul id="lrclist"><!-- 保证歌词在正中间 --></ul></div></div><audio src="./material/60054704083.flac" id="audio" controls="controls" loop></audio><button onclick="play()">播放</button><button onclick="over()">暂停</button><button onclick="stop()">静音</button><button onclick="end()">播放完毕后</button><button onclick="update()">我要切歌</button>js代码：
// 歌词文件 =》等你下课var lrcJSON = {"[00:01.74]": "等你下课(with 杨瑞代) - 周杰伦","[00:08.09]": "词：周杰伦","[00:10.18]": "曲：周杰伦","[00:12.61]": "","[00:15.16]": "Jay：你住的 巷子里","[00:18.77]": "我租了一间公寓","[00:21.93]": "","[00:22.48]": "为了想与你不期而遇","[00: 27.25]": "","[00: 28.55]": "高中三年 我为什么","[00: 31.60]": "为什么不好好读书","[00: 34.55]": "","[00: 35.69]": "没考上跟你一样的大学","[00: 39.89]": "","[00: 40.64]": "我找了份工作","[00: 42.89]": "","[00: 43.73]": "离你宿舍很近","[00: 46.23]": "","[00: 46.98]": "当我开始学会做蛋饼","[00: 50.41]": "才发现你 不吃早餐","[00: 55.24]": "喔 你又擦肩而过","[00: 59.33]": "","[01: 00.01]": "你耳机听什么","[01: 02.52]": "","[01: 03.18]": "能不能告诉我","[01: 05.64]": "","[01: 06.74]": "合：躺在你学校的操场看星空","[01: 13.50]": "","[01: 14.32]": "教室里的灯还亮着你没走","[01: 19.76]": "","[01: 20.78]": "记得 我写给你的情书","[01: 26.32]": "","[01: 27.28]": "都什么年代了","[01: 29.68]": "","[01: 30.54]": "到现在我还在写着","[01: 34.17]": "总有一天总有一年会发现","[01: 39.54]": "","[01: 40.30]": "有人默默的陪在你的身边","[01: 46.10]": "","[01: 46.97]": "也许 我不该在你的世界","[01: 52.47]": "","[01: 53.33]": "当你收到情书","[01: 55.70]": "","[01: 56.78]": "也代表我已经走远","[02: 01.67]": "","[02: 24.25]": "Gary：学校旁 的广场","[02: 27.98]": "","[02: 28.54]": "我在这等钟声响","[02: 31.36]": "","[02: 32.39]": "等你下课一起走好吗","[02: 37.34]": "Jay：弹着琴 唱你爱的歌","[02: 41.52]": "暗恋一点都不痛苦","[02: 43.88]": "Gary：一点都不痛苦","[02: 45.43]": "Jay：痛苦的是你","[02: 46.83]": "合：根本没看我","[02: 49.75]": "Jay：我唱这么走心","[02: 52.23]": "Gary：这么走心","[02: 53.40]": "Jay：却走不进你心里","[02: 55.49]": "Gary：进你心里","[02: 56.96]": "Jay：在人来人往","[02: 58.50]": "合：找寻着你 守护着你","[03: 01.74]": "不求结局","[03: 04.63]": "合：喔","[03: 06.13]": "Gary：你又擦肩","[03: 07.57]": "合：而过","[03: 08.97]": "","[03: 09.62]": "Jay：我唱告白气球","[03: 11.86]": "","[03: 12.94]": "终于你回了头","[03: 15.69]": "","[03: 16.94]": "合：躺在你学校的操场看星空","[03: 23.27]": "","[03: 24.23]": "教室里的灯还亮着你没走","[03: 29.54]": "","[03: 30.58]": "记得 我写给你的情书","[03: 35.76]": "","[03: 37.04]": "都什么年代了","[03: 39.09]": "","[03: 40.19]": "到现在我还在写着","[03: 43.89]": "总有一天总有一年会发现","[03: 49.31]": "","[03: 50.07]": "有人默默的陪在你的身边","[03: 55.87]": "","[03: 56.68]": "也许 我不该在你的世界","[04: 02.12]": "","[04: 02.98]": "当你收到情书","[04: 05.29]": "","[04: 06.59]": "也代表我已经走远"}var lrcTime = [];//歌词对应的时间数组var ul = document.getElementById('lrclist');//获取ulvar i = 0;for (const key in lrcJSON) {if (lrcJSON.hasOwnProperty(key)) {var value = lrcJSON[key];lrcTime[i++] = parseFloat((parseFloat(key.substr(1, 3)) * 60 + parseFloat(key.substring(4, 10))).toFixed(2));//00:00.000转化为00.000格式ul.innerHTML += "<li><p>" + lrcJSON[key] + "</p></li>";//ul里填充歌词}}lrcTime[lrcTime.length] = lrcTime[lrcTime.length - 1] + 3;//如不另加一个结束时间，到最后歌词滚动不到最后句var $li = ul.getElementsByTagName('li');//获取所有li var currentLine = 0;//当前播放到哪一句了var currentTime; //当前播放的时间var ppxx;//保存ul的translateY值window.onload = function () {var bgm = document.getElementById('audio');// 监听音频播放结束后的操作bgm.addEventListener('ended', function (e) {// 开始切歌update();})// 监听音频时间改变事件bgm.addEventListener('timeupdate', function (e) {currentTime = bgm.currentTime;for (j = currentLine, len = lrcTime.length; j < len; j++) {if (currentTime < lrcTime[j + 1] && currentTime > lrcTime[j]) {currentLine = j;ppxx = currentLine * -32; // 每行歌词的高度ul.style.transform = "translateY(" + ppxx + "px)";if (currentLine > 1) {$li[currentLine - 1].setAttribute("class", "");$li[currentLine].setAttribute("class", "on");}break;}}})// audio进度更改后事件audio.onseeked = function () {currentTime = bgm.currentTime;$li[currentLine - 1].setAttribute("class", "");for (k = 0, len = lrcTime.length; k < len; k++) {if (currentTime < lrcTime[k + 1] && currentTime < lrcTime[k]) {currentLine = k;break;}}};}// 开始播放function play() {bgm.play();}// 暂停function over() {bgm.pause();}// 如果音频是暂停，返回truefunction stop() {if (bgm.muted) {bgm.muted = false;console.log("接触静音状态");} else {bgm.muted = true;console.log("打开静音状态");}}// 歌曲路径数组let material = ['./material/60054704083.flac']; // 我要切歌function update() {var url = bgm.src;if (material.indexOf(url) < material.length - 1) {bgm.src = material[(material.indexOf(url) + 1)];} else {bgm.src = material[0];}// 重新播放play();}思路引用:
https://blog.csdn.net/yzy_csdn/article/details/84536646
https://blog.csdn.net/lijiasiang/article/details/79209683
JS制作音乐播放器并高亮歌词滚动以及按钮暂停播放切歌相关推荐
- 全网首个tk网络音乐播放器！支持歌词滚动！你看我吊不？
这是一个用 Python 的 tkinter 库做的一个网络音乐播放器.我不说它的 UI 设计的有多好看,但是它的功能绝对是全站首个!坚持看到底,你不点赞算我输! 成果展示 程序截图 前期准备 程序结 ...
- android MP3播放器（支持歌词滚动等功能）
大二课余时间写的音乐播放器,发现目前网上很多android播放器都缺胳膊少腿的, 于是便分享出来给才接触android的同学作参考,(Tomcat服务器功能已删除) 实现了启动动画,引导界面,appw ...
- vue audio 播放器（带歌词滚动）
这个是基于element 做的audio播放器弹窗,再打开的时候通过调用这个弹窗的open方法吧数据传入 如: 歌词格式应该与正式格式同,即:时间 歌词 [00:00.00] 作曲 : 高进 [00: ...
- 【转】木人播放器（同步歌词mp3格式）(需要jmf包)
原文来源:http://hi.baidu.com/282919088/item/a45efd2d465d6e0b42634ac5 package 娱乐.播放器; import java.awt.Con ...
- 一个基于Directshow实现的音频播放器，支持歌词显示
之前在VC知识库上下载了一个基于Directshow做的音乐播放器,带歌词显示功能,觉得挺酷的.我下载了代码,编译了工程之后,运行起来的界面效果如下: 这个播放器支持的功能有: 支持播放MP3/AAC ...
- 视频、音乐播放器大家都听说过，那么图片播放器呢
原标题:应用Tkinter模块制作一个图片播放器 今天,在看视频的同时,想了一下,既然视频.音乐都有自己的播放器,那么图片呢?是否有自己的播放器呢?既然没有,为什么不做一个呢? 文章目录 原标题:应用 ...
- VUE获取网易云音乐接口，并实现歌词滚动效果
VUE获取网易云音乐接口,并实现歌词滚动效果 最近在捣腾个人博客,加了个播放音乐的模块,所以在这里记录一下歌曲播放歌词实时滚动效果的实现,顺便总结加深一下对各个知识点的理解. GitHub地址 演示地 ...
- 好看的html5播放器,7 款超具个性的 HTML5 播放器
这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...
- Web点播播放器1.0——腾讯sdk网页点播播放器
https://www.qcloud.com/document/product/267/5706 功能介绍 本文档是介绍腾讯云视频点播服务的网页播放器(Web SDK)的使用说明,它可帮助腾讯云客户直 ...
最新文章
- 智能手表音频特性测试_智能手表和传统手表怎么选？有这些需求选它更合适
- 成功解决ValueError: cannot convert float NaN to integer
- CIO客观评价SAP和用友的差异
- 机器学习基础6--集群模型和算法
- clamav程序的研究总结
- redis 上亿数据_票房上亿，稳居第一？肖战《诛仙》日本上映，真实数据到底怎样...
- 曼哈顿距离最小生成树
- dj电商-模型类设计-1.x-用户模块的两张表
- 使用“时间机器”备份您的 Mac
- 2022版保姆级Idea调试jdk源码
- 谷歌插件无法显示在地址栏右侧
- 标准c++库、stl库，boost库，qt库
- 卸载删除gitlab
- 002--YAML工具
- 【密码学】Java课设-文件加密系统（适用于任何文件）
- 关于如何调用苹果自带的地图APP
- 红米4鸿蒙系统刷机包,小米红米(移动版)刷机包 基于官方4.2.1 极简稳定纯净 完整root权限 V4.0...
- hydrus1d使用说明_hydrus1d简明使用手册.doc
- java软件开发是做什么的，干货满满！
- Pdftranspro简介