Use the simplest front-end technology to create a simple music player-HTML Tutorial-php.cn

This time I will bring you the simplest front-end technology to make a simple music player. What are theprecautions. The following is a practical case. Let’s take a look.

The music of this player is obtained through Douban FM’s API. We can randomly listen to any music on Douban FM.

html part
Code:

Copy after login

I won’t write the css code here. You can look at the source file directly or look at it from the developer tools. If you have any questions, you can message me privately.

js part
Code one (playback control):

//播放控制 var myAudio = $("audio")[0]; // 播放/暂停控制 $(".btn1").click(function(){ if (myAudio.paused) { play() } else { pause() } }); // 频道切换 $(".btn2").click(function(){ getChannel(); }); // 播放下一曲音乐 $(".btn3").click(function(){ getmusic(); }); function play(){ myAudio.play(); $('.btn1').removeClass('m-play').addClass('m-pause'); } function pause(){ myAudio.pause(); $('.btn1').removeClass('m-pause').addClass('m-play'); }

Copy after login

Code two (ajax to get Douban FM music):

//获取随机频道信息 function getChannel(){ $.ajax({ url: 'http://api.jirengu.com/fm/getChannels.php', dataType: 'json', Method: 'get', success: function(response){ var channels = response.channels; var num = Math.floor(Math.random()*channels.length); var channelname = channels[num].name;//获取随机频道的名称 var channelId = channels[num].channel_id;//获取随机频道ID $('.record').text(channelname); $('.record').attr('title',channelname); $('.record').attr('data-id',channelId);//将频道ID计入data-id中 getmusic(); } }) } // 通过ajax获取歌曲 function getmusic(){ $.ajax({ url: 'http://api.jirengu.com/fm/getSong.php', dataType: 'json', Method: 'get', data:{ 'channel': $('.record').attr('data-id') }, success: function (ret) { var resource = ret.song[0], url = resource.url, bgPic = resource.picture, sid = resource.sid,//获取歌词的参数 ssid = resource.ssid,//获取歌词的参数 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();//播放 } }) };

Copy after login

Note: Douban will restrict our access, so be sure to add

Code 3 (Progress Bar Control) under thetag ):

setInterval(present,500) //每0.5秒计算进度条长度 $(".basebar").mousedown(function(ev){ //拖拽进度条控制进度 var posX = ev.clientX; var targetLeft = $(this).offset().left; var percentage = (posX - targetLeft)/400100; myAudio.currentTime = myAudio.duration * percentage/100; }); function present(){ var length = myAudio.currentTime/myAudio.duration100; $('.progressbar').width(length+'%');//设置进度条长度 //自动下一曲 if(myAudio.currentTime == myAudio.duration){ getmusic() } }

Copy after login

The audio tag itself in html5 provides a progress bar function and a volume control function. Here I set up the progress bar myself for the sake of a beautiful interface. The volume control has not been added yet. You can add it yourself. .

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!