用js实现一个简单的音乐播放器

课堂作业记录，js部分我真的有点写不来hhh，有参考

效果图：

实现了音乐器的简单功能，播放暂停，快进后退，音量加减，进度条的显示，以及歌词滚动等功能

1、播放暂停

mainControl.onclick = function () {mysong.play();//暂停按钮隐藏，播放按钮出现mainControl.style.display = "none";stopControl.style.display = "block";setInterval(timeSpan, 1000);};stopControl.onclick = function () {mysong.pause();//播放按钮隐藏，暂停按钮出现stopControl.style.display = "none";mainControl.style.display = "block";};

2、快进后退

  //后退leftControl.onclick = function () {mysong.currentTime -= 30;};//前进rightControl.onclick = function () {mysong.currentTime += 30;};

3、控制音量

function timeDispose(time) {let mm = parseInt(time / 60);let ss = parseInt(time % 60);return mm + ":" + ss;}

4、进度条的显示

 //进度条更新function timeSpan() {songTime.innerHTML =timeDispose(mysong.currentTime) +"&nbsp;|&nbsp" +timeDispose(mysong.duration);let process = document.querySelector("#process");let processYet = document.querySelector("#processYet");let processWidth = process.style.width.split("px")[0];//求音乐进度条的长度processYet.style.width =(mysong.currentTime / mysong.duration) * processWidth + "px";}

5、时间更新

//时间更新function timeDispose(time) {let mm = parseInt(time / 60);let ss = parseInt(time % 60);return mm + ":" + ss;}

6、歌词滚动

歌词直接去网站搜索提取，这个网站可以

萧萧_爱要坦荡荡LRC动态歌词下载 - 一听音乐网 (1ting.com)

歌词滚动完整代码如下：

//歌词滚动
var lrc = ` [00:00.000] 作词 : 许常德
[00:00.017] 作曲 : Rungroth Pholwa
[00:00.34]Da La La La…
[00:17.04]天色是有点暗
[00:18.81]气氛是有点蓝
[00:20.81]皎洁的月光显得特别亮
[00:24.59]对白是很简单
[00:26.63]像是精致装扮
[00:28.29]显得通俗不堪
[00:32.39]你不必太紧张
[00:34.29]诚实会有点难
[00:36.25]也许完美对我反而是假象
[00:40.15]过去我不想谈
[00:42.10]有缺憾也无妨
[00:43.83]我要你的自然
[00:47.67]爱要坦荡荡
[00:51.03]不要装模作样到天长
[00:55.38]要你很善良
[00:58.70]就算对我说谎也温暖
[01:03.06]请你坦荡荡
[01:06.46]世上没有满分的浪漫
[01:10.88]人们口中说的誓言
[01:13.68]真实的可怜
[01:15.50]你难道没有被爱背叛的绝望
[01:19.17]你不必太紧张
[01:20.77]诚实会有点难
[01:22.69]也许完美对我反而是假象
[01:26.50]过去我不想谈
[01:28.60]有缺憾也无妨
[01:30.26]我要你的自然
[01:34.41]Da La La La…
[02:05.16]爱要坦荡荡
[02:08.40]不要装模作样到天长
[02:12.75]要你很善良
[02:16.17]就算对我说谎也温暖
[02:20.47]请你坦荡荡
[02:23.94]世上没有满分的浪漫
[02:28.26]人们口中说的誓言
[02:30.93]真实的可怜
[02:32.85]你难道没有被爱背叛的绝望
[02:36.44]你不必太紧张
[02:38.21]诚实会有点难
[02:40.17]也许完美对我反而是假象
[02:43.99]过去我不想谈
[02:45.95]有缺憾也无妨
[02:47.72]我要你的自然
[02:51.86]Da La La La…
`;function $(id) {return document.getElementById(id);
}//这样写以后getid方便function getLrcArray() {var parts = lrc.split("\n");for (let index = 0; index < parts.length; index++) {parts[index] = getLrcObj(parts[index]);}return parts;function getLrcObj(content) {var twoParts = content.split("]");var time = twoParts[0].substr(1);var timeParts = time.split(":");var seconds = +timeParts[1];var min = +timeParts[0];seconds = min * 60 + seconds;var words = twoParts[1];return{seconds: seconds,words: words,};}
}var lrcArray = getLrcArray();function inputLrc() {for (let index = 0; index < lrcArray.length; index++) {var li = document.createElement("li");li.innerText = lrcArray[index].words;$("ullrc").appendChild(li);}
}inputLrc();function setPosition() {var index = getLrcIndex();if (index == -1) {return;}var lrc_li_height = 35, lrc_ul_height = 450;var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";var activeLi = $("ullrc").querySelector(".active");if(activeLi){activeLi.classList.remove("active");}$("ullrc").children[index].classList.add("active");
}var turn = 0;function getLrcIndex(){var time = $("MusicPlayer").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {if (lrcArray[index].seconds > time) {return index - 1;}}
}$("MusicPlayer").ontimeupdate = setPosition;}

拆分一下：

获取时间和歌词

var lrc = `
这里是歌词
`;
var parts=lrc.split("\n");

function getLrcArray() {//分割每一列var parts = lrc.split("\n");//遍历分割每一句for (let index = 0; index < parts.length; index++) {parts[index] = getLrcObj(parts[index]);}return parts;function getLrcObj(content) {//把一句分割为俩部分var twoParts = content.split("]");var time = twoParts[0].substr(1);//将时间前的"["截掉var timeParts = time.split(":");//用秒处理比较翻版我们这里这里转换成秒var seconds = +timeParts[1];var min = +timeParts[0];seconds = min * 60 + seconds;//歌词获取var words = twoParts[1];return{//返回秒和歌词seconds: seconds,words: words,};}
}var lrcArray = getLrcArray();//结果存储在这里

歌词位置滚动

用margin-top: -height;来实现

写一个active样式

function setPosition() {var index = getLrcIndex();var lrc_li_height = 35, lrc_ul_height = 450;//定义行高和歌词box高度var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;//计算if (top < 0) {top = 0;//如果top为负说明歌词在开始几句,无需滚动,top归零}$("ullrc").style.marginTop = -top + "px";//改变mtvar activeLi = $("ullrc").querySelector(".active");//寻找ul下类名为active的元素并返回之if(activeLi){activeLi.classList.remove("active");//删}$("ullrc").children[index].classList.add("active");//添
}

歌词行数的获取

这里比较播放时间，出现的播放时间小于数组的播放时间就输出 index-1

function getLrcIndex(){var time = $("MusicPlayer").currentTime;for (var index = 0; index < lrcArray.length; index++) {if (lrcArray[index].seconds > time) {return index - 1;}}
}

用js实现一个简单的音乐播放器相关推荐

HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
自制一个简单的音乐播放器
这两天刚学完了contentprovider和service组件,就综合下所学的,自制了一个简单的音乐播放器. 代码如下: 主activity代码 public class MainActivity ...
用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
用Qt写一个简单的音乐播放器（六）：显示歌词（正则表达式）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
用Qt写一个简单的音乐播放器（一）：使用QMediaPlayer播放音乐
一.前言 QMediaplayer可以用于解析音频文件和视频文件,继承自QMediaObject,涉及到的对象为QMediaContent.QMediaObject可以提供关于媒体内容的接入,通过UR ...
用Qt写一个简单的音乐播放器（五）：歌曲播放时间显示
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
Android开发做一个简单的音乐播放器
Android开发如何做一个简单的音乐播放器,首先我们先要知道用到的知识点有哪些. 1.MediaPlayer:可以播放本地资源.sd卡内存资源以及网络uri资源,在这里我们播放sd卡上的音乐资源. ...
用Qt写一个简单的音乐播放器（七）：界面美化（QSS样式表）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
如何使用aframe.js构建一个简单的VR播放器
在当今这个信息化的时代,虚拟现实(VR)已经开始逐渐成为一种新的生活方式.作为一名前端开发工程师,在学习和探索VR技术方面,aframe.js是一个非常有趣和有用的工具.在本文中,我将介绍如何使用af ...

用js实现一个简单的音乐播放器

用js实现一个简单的音乐播放器相关推荐

最新文章

热门文章