How to use JS to develop a simple music player
This article introduces the knowledge of "how to use JS to develop a simple music player". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
First, the final effect is shown in the figure:
First, let's write the html interface index.html with the following code:
00:00
00:00
Next, write style.css with the following code:
Body {
Margin: px
Background-color: # ccc
}
# boxDiv {
Width: 375px
Height: 568px
Margin: 10px auto
Position: relative
}
# contentDiv {
Width: 375px
Height: 460px
Background-image: url. / img/audio/play_bg@2x.png)
Overflow: hidden
}
# lrcDiv {
Margin-top: 260px
}
# lrcDiv span {
Display: block
Line-height: 40px
Text-align: center
Color: white
Font-size: 20px
}
# bgTopSpan {
Position: absolute
Display: block
Width: 375px
Height: 30px
Top: px
Background-image: url. / img/audio/play_top_shadow@2x.png)
}
# bgBottomSpan {
Top: 430px
Position: absolute
Background-image: url. / img/audio/play_bottom_shadow@2x.png)
Display: block
Width: 375px
Height: 30px
}
# controlDiv {
Width: 375px
Height: 180px
Position: relative
Background-color: white
}
# progressDiv {
Background-color: red
Height: 1.5px
Width: px
}
# pointerImg {
Width: 18px
Height: 18px
Position: absolute
Top:-8.5px
Left:-3px
}
# playTimeSpan {
Display: block
Position: absolute
Font-size: 14px
Width: 35px
Top: 5px
Left: 5px
}
# totalTimeSpan {
Display: block
Position: absolute
Font-size: 14px
Width: 35px
Top: 5px
Left: 335px
}
# titleSpan {
Display: block
Position: absolute
Height: 30px
Width: 295px
Font-size: 20px
Text-align: center
Left: 40px
Top: 5px
}
# buttonDiv {
Margin-top: 40px
Position: relative
}
# prevImg {
Width: 40px
Height: 40px
Position: absolute
Top: 20px
Left: 60px
}
# playOrPauseImg {
Width: 70px
Height: 70px
Position: absolute
Top: 5px
Left: 152px
}
# nextImg {
Width: 40px
Height: 40px
Position: absolute
Top: 20px
Left: 275px
}
Finally, write common.js with the following code:
$(function () {)
/ / list of songs
Var playList = ["Red Sun", "Wolf temptation", "across the Sea to see you"]
/ / the serial number of the song currently played
Var currentIndex =
/ / the native object of the player
Var audio = $("# song") []
/ / playback time array
Var timeArr = []
/ / lyrics array
Var lrcArr = []
/ / call the settings before playback
Setup ()
/ / play songs
PlayMusic ()
/ / play songs
Function playMusic () {
/ / play songs
Audio.play ()
/ / set to paused picture
("# playOrPauseImg") .attr ("src", "img/audio/pause@2x.png")
}
/ / set before the song is played
Function setup () {
/ / set which song to play
/ / img/audio/ Red Sun. Mp3
Audio.src = "img/audio/" + playList [currentIndex] + ".mp3"
/ / set the name of the song
$("# titleSpan") .text (playlist [currentIndex])
/ / set lyrics
SetLrc ()
}
/ / set lyrics
Function setLrc () {
/ / clear the lyrics of the previous song
("# lrcDiv span") .remove ()
/ / empty the array
TimeArr = []
LrcArr = []
/ / load the lyrics file
$.get ("img/audio/" + playList [currentIndex] + ".lrc", {}, function (data) {
If (data) {
/ / cut strings by line
Var arr = data.split ("\ n")
/ / split the lyrics
For (var I =; I
< arr.length; i++) { // 分割时间和歌词 var tempArr = arr[i].split("]"); if (tempArr.length >1) {
/ / add time and lyrics to the array
TimeArr.push (tempArr [])
LrcArr.push (tempArr [1])
}
}
/ / display the lyrics
For (var I =; I
< lrcArr.length; i++) { $("#lrcDiv").append(""+lrcArr[i]+""); } } }); } // 播放暂停事件 $("#playOrPauseImg").click(function(){ // 如果播放器是暂停状态 if(audio.paused){ // 继续播放 playMusic(); }else{ // 暂停 audio.pause(); // 变成播放的图片 $("#playOrPauseImg").attr("src", "img/audio/play@2x.png"); } }); // 上一首 $("#prevImg").click(function(){ // 如果是第一首，那么跳到最后一首 if(currentIndex == ){ currentIndex = playList.length - 1; }else{ currentIndex--; } // 播放前设置 setup(); // 播放 playMusic(); }); // 下一首 $("#nextImg").click(function(){ // 如果是最后一首，就跳到第一首 if(currentIndex == playList.length - 1){ currentIndex = ; }else{ currentIndex++; } // 播放前设置 setup(); // 播放 playMusic(); }); // 监听播放器播放时间改变事件 audio.addEventListener("timeupdate", function(){ // 当前播放时间 var currentTime = audio.currentTime; // 总时间 var totalTime = audio.duration; // 当是数字的时候 if(!isNaN(totalTime)){ // 得到播放时间与总时长的比值 var rate = currentTime / totalTime; // 设置时间显示 // 播放时间 $("#playTimeSpan").text(getFormatterDate(currentTime)); // 总时长 $("#totalTimeSpan").text(getFormatterDate(totalTime)); // 设置进度条 $("#progressDiv").css("width", rate * 375 + "px"); // 设置进度圆点 $("#pointerImg").css("left", (375 - 15) * rate - 3 + "px"); // 设置歌词的颜色和内容的滚动 for (var i = ; i < timeArr.length - 1; i++) { if(!isNaN(getTime(timeArr[i]))){ // 当前播放时间大于等于i行的时间，并且小于下一行的时间 if (currentTime >= getTime (timeArr [I]) & & currentTime
< getTime(timeArr[i+1])){ // 当前行歌词变红色 $("#lrcDiv span:eq("+i+")").css("color", "#FF0000"); // 其他行歌词变白色 $("#lrcDiv span:not(:eq("+i+"))").css("color", "#FFFFFF"); // 当前行歌词滚动 $("#lrcDiv").stop(false, true).animate({"margin-top": 260 - 40 * i + "px"}, 1000); } } } } }); function getTime(timeStr){ // 去掉左边的[ var arr = timeStr.split("["); if(arr.length >1) {
/ / get the time on the right
Var str = arr [1]
/ / split minutes and seconds
Var tempArr = str.split (":")
/ / minutes
Var m = parseInt (tempArr [])
/ / second
Var s = parseFloat (tempArr [1])
Return m * 60 + s
}
Return
}
/ / format time (00:00)
Function getFormatterDate (time) {
/ / minutes
Var m = parseInt (time / 60)
/ / second
Var s = parseInt (time% 60)
/ / Zero padding
M = m > 9? M: "0" + m
S = s > 9? S: "0" + s
Return m + ":" + s
}
});
Please download the pictures, songs and lyrics by yourself. finally, you can try it.
This is the end of the content of "how to use JS to develop a simple music player". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
