用html和css制作音乐网站,【html、css、jq】制作一个简洁的音乐播放器

html部分

代码：

这里就不写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();//播放

}

})

};