主要是做快进、后退、歌曲切换以及音量调节，歌词只弄了一首歌的歌词。
播放暂停
在css里面设置的背景图片，利用音频的play、pause属性控制播放暂停，在改变样式就可以。
<div id="mainControl" class="mainControl"></div>
<div id="stopControl" class="stopControl" style="display:none"></div>//获取标签
let mainControl = document.querySelector("#mainControl");//开始
let stopControl = document.querySelector("#stopControl");//暂停
//播放
mainControl.onclick=function(){
myAudio.play();
//播放按钮隐藏，暂停按钮出现
mainControl.style.display = "none";
stopControl.style.display = "block";
timeSpan();
}
//暂停
stopControl.onclick=function(){
myAudio.pause();
//播放按钮隐藏，暂停按钮出现
mainControl.style.display = "block";
stopControl.style.display = "none";
}快进、后退
currentTime获取当前的时间，在当前的时间上进行-=或者+=
<div class="leftControl"></div>
<div class="rightControl"></div>let leftControl = document.querySelector(".leftControl");//后退
let rightControl = document.querySelector(".rightControl");//快进
//后退30s
leftControl.onclick = function(){
myAudio.currentTime -= 30;
}
//前进30s
rightControl.onclick = function(){
myAudio.currentTime += 30;
}音量控制
写一个rang的input框，可以通过滑动来控制音量的大小。把inpu的value值赋给audio的volume。
<div class="voiceFull"><img src="./images/声音.png"></div>
<input type="range" min="0" max="1" step="0.1" class="voidProcess" id="Volume" onclick="setVolume()"/>let Volume = document.getElementById("Volume");//音量
//音量调节
function setVolume() {
myAudio.volume = Volume.value;
}进度条、时间跟着动
<div class="processControl" >
<div id="songTime" class="songTime">00:00 | 00:00</div>
<div id="process" style="width:350px" class="process" ></div>
<div id="processYet" class="processYet"></div>
</div>let songTime = document.querySelector("#songTime");//音乐时间
let process = document.querySelector("#process");//进度条
let processYet = document.querySelector("#processYet");//走动进度条
//时间更新
function timeDispose(time){
let mm = parseInt(time/60);
let ss = parseInt(time%60);
mm = mm>=10?mm:'0'+mm;
ss = ss>=10?ss:'0'+ss;
return mm + ":" + ss;
}
function timeSpan(){
setInterval(function(){
//时间走动
songTime.innerHTML = timeDispose(myAudio.currentTime)+"|"+timeDispose(myAudio.duration);
//求音乐进度条长度，去掉px
let processWidth = process.style.width.split("px")[0];
//进度条走动
processYet.style.width = (myAudio.currentTime/myAudio.duration)*processWidth+"px";
},1000)
}播放上一曲、下一曲
我是弄了两个图片来点击。
写一个歌曲、歌手、歌名的数组，当是第一首歌的时候，计算length - 1，就变成了她的后一个，也就是下一首歌，此时，audio的src变成了相应的地址，再play一下就可以。
<div id="songName" class="songName">爱要坦荡荡</div>
<div class="songAuther">潇潇</div>
<div class="lastMusic" id="lastMusic"></div>
<div class="nextMusic" id="nextMusic"></div>var musicsrc = ['./music/爱要坦荡荡.mp3','./music/偷偷的爱.mp3','./music/感恩的心.mp3'];
let songName = document.querySelector("#songName");//歌名
let songAuther = document.querySelector(".songAuther");//歌手名字
let titleList = new Array("爱要坦荡荡", "偷偷的爱", "感恩的心");
let AutherList = new Array("潇潇", "严爵/丁当", "欧阳菲菲");
let lastMusic = document.getElementById("lastMusic");//上一首
let nextMusic = document.getElementById("nextMusic");//下一首
// 下一首歌
nextMusic.onclick=function (){
if (i == 0)
i = musicsrc.length - 1;
else
i--;
myAudio.pause();
myAudio.src = musicsrc[i];
songName.innerHTML = titleList[i];
songAuther.innerHTML = AutherList[i];
myAudio.play();
}
//上一首歌
lastMusic.onclick=function (){
if (i == musicsrc.length - 1){
i = 0;
}else{
i++;
myAudio.pause();
myAudio.src = musicsrc[i];
songName.innerHTML = titleList[i];
songAuther.innerHTML = AutherList[i];
myAudio.play();
}
}制作播放列表
制作一个音乐列表。
外面的for循坏实现，可以点击列表的次数。
里面的点击事件，如果li[i]标签的class为play，那些就切换到i的src。
<div id="playList" class="playList">
<ul class="mList">
<p class="play">爱要坦荡荡</p>
<p>偷偷的爱</p>
<p>感恩的心</p>
</ul>
</div>//点击列表播放
let li= document.getElementsByTagName("p");
for (i = 0; i < li.length; i++) {
li[i].onclick = function () {
for (var i = 0; i < li.length; i++) {
if (this == li[i]) {
li[i].className = 'play';
myAudio.src = musicsrc[i];
songName.innerHTML = titleList[i];
songAuther.innerHTML = AutherList[i];
myAudio.play();
} else {
li[i].className = '';
}
}
}
}滚动歌词
找到带有时间的歌词，然后对歌词进行切割。
用createElement进行li标签的增加。
对某句歌词进行着重处理，算出相应的高度。
😖还有点没弄懂！还要再琢磨一下子
<div class="container">
<ul class="wordList">
</ul>
</div>let container = document.querySelector(".container");//歌词
let wordList = document.querySelector(".wordList");//歌词
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 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() { //增加歌词li标签
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray[index].words;
wordList.appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 60, lrc_ul_height = 220;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
wordList.style.marginTop = -top + "px";
var activeLi = wordList.querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
wordList.children[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = myAudio.currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray[index].seconds > time) {
return index - 1;
}
}
}
myAudio.ontimeupdate = setPosition;本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
