这里就不写css的代码了，大家可以直接看源文件或者从开发者工具中去看。如果有问题可以私聊我。

js部分

代码一（播放控制）：

//播放控制

varmyAudio=$("audio")[0];

//播放/暂停控制

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

if(myAudio.paused){

play()

}else{

pause()

}

});

//频道切换

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

getChannel();

});

//播放下一曲音乐

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

getmusic();

});

functionplay(){

myAudio.play();

$('.btn1').removeClass('m-play').addClass('m-pause');

}

functionpause(){

myAudio.pause();

$('.btn1').removeClass('m-pause').addClass('m-play');

}

代码二（ajax获取豆瓣fm音乐）：

//获取随机频道信息

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;//获取随机频道的名称

varchannelId=channels[num].channel_id;//获取随机频道ID

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

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

$('.record').attr('data-id',channelId);//将频道ID计入data-id中

getmusic();

}

})

}

//通过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,//获取歌词的参数

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();//播放

}

})

};

注意：豆瓣会限制我们的访问，所以在标签下一定要添加

代码三（进度条控制）：

setInterval(present,500)//每0.5秒计算进度条长度

$(".basebar").mousedown(function(ev){//拖拽进度条控制进度

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+'%');//设置进度条长度

//自动下一曲

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

getmusic()

}

}

html5中audio标签本身提供进度条功能，以及音量控制功能的，这里我为了界面的好看自己设置了进度条，音量控制还没有加，大家可以自行添加。

感谢各位的阅读，以上就是“HTML怎么制作一个简洁的音乐播放器”的内容了，经过本文的学习后，相信大家对HTML怎么制作一个简洁的音乐播放器这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流