快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

HTML怎么制作一个简洁的音乐播放器

这篇文章主要讲解了“HTML怎么制作一个简洁的音乐播放器”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML怎么制作一个简洁的音乐播放器”吧!

站在用户的角度思考问题,与客户深入沟通,找到镇巴网站设计与镇巴网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟空间、企业邮箱。业务覆盖镇巴地区。

这个播放器的音乐是通过豆瓣FM的API获取到的,我们可以随机的听到豆瓣FM的任何音乐。

html部分

代码:

这里就不写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怎么制作一个简洁的音乐播放器这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


标题名称:HTML怎么制作一个简洁的音乐播放器
标题URL:http://6mz.cn/article/jjicjc.html

其他资讯