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

This article mainly explains "HTML how to make a concise music player", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "HTML how to make a simple music player" bar!

The music of this player is obtained through the API of Douban FM, and we can listen to any music of Douban FM at random.

Html part

Code:

Instead of writing css code here, you can look directly at the source files or from the developer's tools. If you have any questions, you can talk to me in private.

Js part

Code 1 (playback control):

/ / playback control

VarmyAudio=$ ("audio") [0]

/ / play / pause control

$(".btn1") .click (function () {

If (myAudio.paused) {

Play ()

} else {

Pause ()

}

})

/ / Channel switching

$(".btn2") .click (function () {

GetChannel ()

})

/ / play the next music

$(".btn3") .click (function () {

Getmusic ()

})

Functionplay () {

MyAudio.play ()

$('.btn1'). RemoveClass ('mmurplay'). AddClass (' mmurpause')

}

Functionpause () {

MyAudio.pause ()

$('.btn1'). RemoveClass ('mmurpause'). AddClass (' mmurplay')

}

Code 2 (ajax gets Douban fm music):

/ / get random channel information

FunctiongetChannel () {

$.ajax ({

Url:' http://api.jirengu.com/fm/getChannels.php',

DataType:'json'

Method:'get'

Success:function (response) {

Varchannels=response.channels

Varnum=Math.floor (Math.random () * channels.length)

Varchannelname= channels [num] .name; / / get the name of the random channel

VarchannelId= channels [num] .channel _ id;// to get random channel ID

$('.record') .text (channelname)

$('.record') .attr ('title',channelname)

$('.record') .attr ('data-id',channelId); / / count channel ID into data-id

Getmusic ()

}

})

}

/ / get songs through ajax

Functiongetmusic () {

$.ajax ({

Url:' http://api.jirengu.com/fm/getSong.php',

DataType:'json'

Method:'get'

Data: {

'channel':$ ('.record'). Attr ('data-id')

}

Success:function (ret) {

Varresource=ret.song [0]

Url=resource.url

BgPic=resource.picture

Sid=resource.sid,// gets the parameters of the lyrics

Ssid=resource.ssid,// gets the parameters of the lyrics

Title=resource.title

Author=resource.artist

$('audio'). Attr (' src',url)

$('.musicname') .text (title)

$('.musicname') .attr ('title',title)

$('.musicer') .text (author)

$('.musicer'). Attr ('title',author)

$(".background") .css ({

'background':'url ('+ bgPic+')'

'background-repeat':'no-repeat'

'background-position':'center'

'background-size':'cover'

})

Play (); / / playback

}

})

}

Note: Douban will restrict our access, so be sure to add it under the label

Code 3 (progress bar control):

SetInterval (present,500) / / calculate the length of the progress bar every 0.5 seconds

$(".basebar") .mousedown (function (ev) {/ / drag the progress bar to control progress

VarposX=ev.clientX

VartargetLeft=$ (this). Offset (). Left

Varpercentage= (posX-targetLeft) / 400100

MyAudio.currentTime=myAudio.duration*percentage/100

})

Functionpresent () {

Varlength=myAudio.currentTime/myAudio.duration100

$('.progressbar') .width (length+'%'); / / set the length of the progress bar

/ / automatic next song

If (myAudio.currentTime==myAudio.duration) {

Getmusic ()

}

}

The audio tag in html5 itself provides the progress bar function, as well as the volume control function. Here, I have set the progress bar for the appearance of the interface. The volume control has not been added yet, so you can add it yourself.

Thank you for reading, the above is the content of "HTML how to make a concise music player". After the study of this article, I believe you have a deeper understanding of how HTML makes a concise music player, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.