How to make a simple music player with HTML
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!
