用最简单的前端技术制作一个简洁的音乐播放器

html部分

代码：

</div>

</div>

</span>

</div>

</div>

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

js部分

代码一（播放控制）：

//播放控制

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');

}

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

//获取随机频道信息

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

}

})

};

注意：豆瓣会限制我们的访问，所以在<head>标签下一定要添加<meta name="referrer" content="no-referrer">

代码三（进度条控制）：

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()

}

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

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h58016.shtml