| 编写一个属于自己的音乐播放器 | 您所在的位置：网站首页 › 网页视频播放源码怎么用 › 编写一个属于自己的音乐播放器 |
|
闲来无事，研究了音乐播放器的歌词滚动功能 首先，要找到你想编写的某一首歌的lrc歌词，我这里以 "将故事写成我们"为例 lrc歌词格式为[00.00.00]xxxxx 复制代码新建一个.js文件 将lrc歌词放入该js文件中(以下的lrc歌词只是其中的一部分，想要看全部可以去我的git上查看[(github.com/cy9886/lyri…]) let lrc = ` [00:00.00] [00:00.57]林俊杰 - 将故事写成我们 [00:01.44]作词：方文山 [00:01.64]作曲：林俊杰 [00:33.39]这最美的秘密 [00:36.97]是我们都在制造巧遇 [00:40.49]谁说幸福 只是一种 [00:44.16]远方的消息 [00:47.30]思念持续着浓郁 [00:51.23]梦甘甜下去 [00:53.86]誓言继续 ...` 复制代码 紧接着，再创建一个.js文件，来编写对于歌词的一些格式化以及生成内容。 复制代码 将歌词格式化为{time:'xxx',name:'xxx'}的格式 function parseLrc () { let arr = [] // 歌词数组 let lines = lrc.split('\n') // 当前歌词 let line; // 每一行的歌词 for (let i = 1; i < lines.length; i++) { line = lines[i] let parts = line.split(']') let timeStr = parts[0].substring(1) // 这里利用toString()的方法是因为需要从'['之后截取到末尾 let obj = { // 这里是拼接成一个新对象 time: time2number(timeStr), name: parts[1] } arr.push(obj) } return arr } 复制代码 将时间进行格式化(mm:ss) function time2number (str) { let parts = str.split(':') let minutes = parts[0] * 60 let seconds = parts[1] return minutes + +seconds } 复制代码 现在格式化的一些操作完成了，该去对歌词进行一些计算了 复制代码1.要获取一些相关的dom元素 let doms = { audio: document.querySelector('audio'), ul: document.querySelector('ul'), container: document.querySelector('.container') } 复制代码2.要计算在格式化之后的数据中，应该高亮的歌词下标，就需要知道当前的播放器播放到了第几秒钟(audio中自带apicurrentTime可查看当前歌词播放到了某时刻) function findIndex () { let currentTime = doms.audio.currentTime // 当前播放时间 for (let i = 0; i < lrcData.length; i++) { if (currentTime < lrcData[i].time) { // 如果当前播放器时间小于歌词的时间 证明现在应该高亮歌词下标的上一句 return i - 1 } } return lrcData.length - 1 //这里是考虑到开头和结尾，不能计算有负数，所以给一个边界值 } 复制代码3.创建歌词列表元素 function createList () { for (let i = 0; i < lrcData.length; i++) { let li = document.createElement('li') li.textContent = lrcData[i].name doms.ul.appendChild(li) } } 复制代码 最后，设置ul的相关偏移量即可 复制代码 let containerHeight = doms.container.clientHeight // 容器高度 let liHeight = doms.ul.children[0].clientHeight // li高度 let maxHeight = doms.ul.clientHeight - containerHeight // 最大高度 function setOffset () { let index = findIndex() let offset = liHeight * index + liHeight / 2 - containerHeight / 2 if (offset < 0) { //如果当前还没有开始播放 offset = 0 } if (offset > maxHeight) { // 当前歌词位置在最后一句 offset = maxHeight } doms.ul.style.transform = `translateY(-${offset}px)` // doms.ul.children[index].classList = 'active' // 去掉之前的active let active = doms.ul.querySelector('.active') if (active) { active.classList.remove('active') } let li = doms.ul.children[index] if (li) { li.classList.add('active') } } doms.audio.addEventListener('timeupdate',setOffset) 复制代码相关的样式文件以及html文件，可在[git中获取(github.com/cy9886/lyri…)] |
| CopyRight 2018-2019 实验室设备网 版权所有 |