Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.