使用JS开发简单的音乐播放器

近，我们在教学生使用JavaScript，今天就带大家开发一款简单的音乐播放器。首先，最终效果如图所示：

首先，我们来编写html界面index.html，代码如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

接下来，编写style.css，代码如下：

body{

margin: 0px;

background-color: #ccc;

}

#boxDiv{

width: 375px;

height: 568px;

margin: 10px auto;

position: relative;

}

#contentDiv{

width: 375px;

height: 460px;

overflow: hidden;

}

#lrcDiv{

margin-top: 260px;

}

#lrcDiv span{

display: block;

line-height: 40px;

text-align: center;

color: white;

font-size: 20px;

}

#bgTopSpan{

position: absolute;

display: block;

width: 375px;

height: 30px;

top: 0px;

}

#bgBottomSpan{

top: 430px;

position: absolute;

display: block;

width: 375px;

height: 30px;

}

#controlDiv{

width: 375px;

height: 180px;

position: relative;

background-color: white;

}

#progressDiv{

background-color: red;

height: 1.5px;

width: 0px;

}

#pointerImg{

width: 18px;

height: 18px;

position: absolute;

top: -8.5px;

left: -3px;

}

#playTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 5px;

}

#totalTimeSpan{

display: block;

position: absolute;

font-size: 14px;

width: 35px;

top: 5px;

left: 335px;

}

#titleSpan{

display: block;

position: absolute;

height: 30px;

width: 295px;

font-size: 20px;

text-align: center;

left: 40px;

top: 5px;

}

#buttonDiv{

margin-top: 40px;

position: relative;

}

#prevImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 60px;

}

#playOrPauseImg{

width: 70px;

height: 70px;

position: absolute;

top: 5px;

left: 152px;

}

#nextImg{

width: 40px;

height: 40px;

position: absolute;

top: 20px;

left: 275px;

}

最后，编写common.js，代码如下：

$(function(){

// 歌曲列表

var playList = ["红日", "狼的诱惑", "漂洋过海来看你"];

// 当前播放的歌曲序号

var currentIndex = 0;

// 播放器的原生对象

var audio = $("#song")[0];

// 播放时间数组

var timeArr = [];

// 歌词数组

var lrcArr = [];

// 调用播放前设置

setup();

// 播放歌曲

playMusic();

// 播放歌曲

function playMusic(){

// 播放歌曲

audio.play();

// 设置为暂停的图片

$("#playOrPauseImg").attr("src", "img/audio/pause@2x.png");

}

// 歌曲播放前设置

function setup(){

// 设置播放哪一首歌曲

// img/audio/红日.mp3

audio.src = "img/audio/" + playList[currentIndex] + ".mp3";

// 设置歌曲的名字

$("#titleSpan").text(playList[currentIndex]);

// 设置歌词

setLrc();

}

// 设置歌词

function setLrc(){

// 清空上一首的歌词

$("#lrcDiv span").remove();

// 清空数组

timeArr = [];

lrcArr = [];

// 加载歌词文件

$.get("img/audio/" + playList[currentIndex] + ".lrc", {}, function(data){

if(data){

// 按行切割字符串

var arr = data.split("\n");

// 分割歌词

for (var i = 0; i < arr.length; i++) {

// 分割时间和歌词

var tempArr = arr[i].split("]");

if (tempArr.length > 1){

// 添加时间和歌词到数组

timeArr.push(tempArr[0]);

lrcArr.push(tempArr[1]);

}

// 显示歌词

for (var i = 0; i < lrcArr.length; i++) {

$("#lrcDiv").append("<span>"+lrcArr[i]+"</span>");

}

});

}

// 播放暂停事件

$("#playOrPauseImg").click(function(){

// 如果播放器是暂停状态

if(audio.paused){

// 继续播放

playMusic();

}else{

// 暂停

audio.pause();

// 变成播放的图片

$("#playOrPauseImg").attr("src", "img/audio/play@2x.png");

}

});

// 上一首

$("#prevImg").click(function(){

// 如果是第一首，那么跳到最后一首

if(currentIndex == 0){

currentIndex = playList.length - 1;

}else{

currentIndex--;

}

// 播放前设置

setup();

// 播放

playMusic();

});

// 下一首

$("#nextImg").click(function(){

// 如果是最后一首，就跳到第一首

if(currentIndex == playList.length - 1){

currentIndex = 0;

}else{

currentIndex++;

}

// 播放前设置

setup();

// 播放

playMusic();

});

// 监听播放器播放时间改变事件

audio.addEventListener("timeupdate", function(){

// 当前播放时间

var currentTime = audio.currentTime;

// 总时间

var totalTime = audio.duration;

// 当是数字的时候

if(!isNaN(totalTime)){

// 得到播放时间与总时长的比值

var rate = currentTime / totalTime;

// 设置时间显示

// 播放时间

$("#playTimeSpan").text(getFormatterDate(currentTime));

// 总时长

$("#totalTimeSpan").text(getFormatterDate(totalTime));

// 设置进度条

$("#progressDiv").css("width", rate * 375 + "px");

// 设置进度圆点

$("#pointerImg").css("left", (375 - 15) * rate - 3 + "px");

// 设置歌词的颜色和内容的滚动

for (var i = 0; i < timeArr.length - 1; i++) {

if(!isNaN(getTime(timeArr[i]))){

// 当前播放时间大于等于i行的时间，并且小于下一行的时间

if (currentTime >= getTime(timeArr[i]) && currentTime < getTime(timeArr[i+1])){

// 当前行歌词变红色

$("#lrcDiv span:eq("+i+")").css("color", "#FF0000");

// 其他行歌词变白色

$("#lrcDiv span:not(:eq("+i+"))").css("color", "#FFFFFF");

// 当前行歌词滚动

$("#lrcDiv").stop(false, true).animate({"margin-top": 260 - 40 * i + "px"}, 1000);

}

});

function getTime(timeStr){

// 去掉左边的[

var arr = timeStr.split("[");

if(arr.length > 1){

// 得到右边的时间

var str = arr[1];

// 分割分、秒

var tempArr = str.split(":");

// 分

var m = parseInt(tempArr[0]);

// 秒

var s = parseFloat(tempArr[1]);

return m * 60 + s;

}

return 0;

}

// 格式化时间（00：00）

function getFormatterDate(time){

// 分

var m = parseInt(time / 60);

// 秒

var s = parseInt(time % 60);

// 补零

m = m > 9 ? m : "0" + m;

s = s > 9 ? s : "0" + s;

return m + ":" + s;

}

});

图片和歌曲、歌词请自行下载，最后，可以运行试试了。是不是很有趣呢？想要学习更多的Java技术开发知识，关注“重庆千锋”获取更多的视频教程，千锋重庆IT培训机构还提供两周免费试听课程，欢迎各位小伙伴申请试听。

天前端学习分享

播放器的音乐通过豆瓣FM的API获取到的

我们可以随机的听到豆瓣FM任何音乐

DEMO

http://book.jirengu.com/jirengu-inc/jrg-vip8/members/Zegendary/大设计/simple%20music%20player/Random%20music%20player/Random-music.html

html+js源代码

https://github.com/Zegendary/Garbage/blob/master/大设计/simple%20music%20player/Random%20music%20player/Random-music.html

css源代码

https://github.com/Zegendary/Garbage/blob/master/大设计/simple%20music%20player/Random%20music%20player/musicindex.css

html 代码

<div class="wrapper">

<div class="background"></div>
<div class="content">
<audio src=""></audio>
<div class="music-massage">
<p class="musicname"></p>
<p class="musicer"></p>
</div>

<div class="music-icon">
<a class="m-icon m-fenxiang colored" href="http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538" target="new"></a>
<span class="m-icon m-star colored"></span>
<span class="m-icon m-heart colored"></span>
</div>
</div>

<span class="basebar">
<span class="progressbar"></span>
</span>
<div class="controls">

<div class="play-control">
<span class="m-icon m-play btn1" title="播放/暂停"></span>
<span class="m-icon m-change btn2" title="换频道"></span>
<span class="m-icon m-next btn3" title="换曲"></span>
</div>

<div class="music-control">
<span class="m-icon m-xunhuan colored"></span>
<span class="m-icon m-radom colored"></span>
</div>
</div>
</div>

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)/400*100;
myAudio.currentTime = myAudio.duration * percentage/100;
});
function present(){
var length = myAudio.currentTime/myAudio.duration*100;
$('.progressbar').width(length+'%');//设置进度条长度
//自动下一曲
if(myAudio.currentTime == myAudio.duration){
getmusic()
}
}

歌词获取方式：

http://jirenguapi.applinzi.com/fm/getLyric.php?ssid=4f86&sid=1451876

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

343599877，我们一起学Web

节概览：

进度条
音轨原理

这一章主要分享两个东西，分别是进度条和音轨。进度条相对来说比较简单，于是先讲。

这是上一次绘制好的音乐播放器，本节也在它的基础上进行完善。

进度条

对于进度条，它可以实时地展示音乐的进度，相信大家都不陌生。

1.绘制进度条

我们在按钮区的上面，也就是屏幕底部的区域绘制进度条。

上代码：

<body>
 <div id='music' class='music'>
 <div class='screen'>
 <i id='music-icon' class="iconfont icon-yinle"></i>
 <div class='progress'>
 <div class='time'></div>
 <div class='bar'></div>
 </div>
 </div>
 <div class='buttons'>
 <i id='prev' class="iconfont icon-icon"></i>
 <i id='play' class="iconfont icon-bofanganniu"></i>
 <i id='pause' class="iconfont icon-zanting" style="display:none"></i>
 <i id='next' class="iconfont icon-icon1"></i>
 </div>
 <span id='info' class='info'></span>
 
 </div>
</body>

代码中progress的部分就是我们需要添加的进度条区域。

给它宽度、高度和背景色：

.music .screen .progress {
 width:100%;
 height:40px;
 background:#ccc;
}

我们希望让它紧挨着播放器屏幕的底部，只需要给它一个定位就行了。关于元素的定位，在之前的章节中我已经详细地讲过，所以在这里就不再赘述了。

position: absolute;
bottom:0;

下来了。

我们将该区域分为上下两块

.music .screen .progress .time {
 border-bottom:1px solid #fff; /*演示用，为了看清楚上下元素块的界限*/
 height:20px; /*高度为父盒子的一半*/
 line-height:20px; /*为了让文字垂直居中*/
 text-align: right; /*文字右对齐*/
}

加上一个测试的时间数据：

<div class='time'>1:30</div>

确认没问题后，把背景色和边框都去掉。同时调色和优化一下：

.music .screen .progress {
 width:100%;
 height:40px;
 position: absolute;
 bottom:0;
}
.music .screen .progress .time {
 color: #fff;
 height:20px;
 line-height:20px; /*为了让时间垂直居中*/
 text-align: right; /*文字右对齐*/
 padding-right: 10px;
}

这样就好看多了吧。

2.动态获取变化的时间

一步一步来，接下来我们先拿到正在播放的时间：

/**
 * 当音频时间正常更新的时候
 */
musicBox.musicDom.ontimeupdate = function(){
 var currentTime = Math.floor(this.currentTime); //获取当前时间
 var m = parseInt(currentTime / 60);//分钟
 var s = parseInt(currentTime % 60);//秒钟
 var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化
 console.log(time); //打印出来看看
}

ontimeupdate你可以理解为一个监听事件，每次时间更新的时候，就会自动进入里面的逻辑。

在图中可以很清晰地看到，我们已经能拿到正在播放的时间了。

接下来，我们将这个动态变化的时间在屏幕上显示出来。

document.getElementsByClassName('time')[0].innerHTML = time;

嗯，这样就行了。

2.计算百分比

// 百分比 = 当前时长 ÷ 总时长 × 100%
var total = this.duration;//总时长
console.log(currentTime + '=======' + total);
document.getElementsByClassName('time')[0].innerHTML = Math.floor(currentTime / total * 100) + "%";

有了百分比，进度条其实也就有了。我们现在将bar的样式加上，宽度默认0%

.music .screen .progress .bar {
 height:20px;
 background: #eee;
 width:0%; 
 opacity: 0.6;
}

然后动态改变宽度：

var total = this.duration;
document.getElementsByClassName('bar')[0].style.width = Math.floor(currentTime / total * 100) + "%";

成功了，进度条就这么产生了。其中最关键的一点就是audio标签元素自带的ontimeupdate 事件，我们可以在里面获取总时长和当前时长，然后就可以计算出百分比，通过给div动态设置宽度来实现进度条的效果。

考虑到篇幅，我本章就不单独封装插件了，将进度条集成到我们的musicBox里面，还需要用到回调函数等一系列的知识点。

音轨

1. 绘制音轨盒子

<div id='music' class='music'>
 <div id='trackBox' class="trackBox"></div>
 <div class='screen'>
 <i id='music-icon' class="iconfont icon-yinle"></i>
 <div class='progress'>
 <div class='time'></div>
 <div class='bar'></div>
 </div>
 </div>
 <div class='buttons'>
 <i id='prev' class="iconfont icon-icon"></i>
 <i id='play' class="iconfont icon-bofanganniu"></i>
 <i id='pause' class="iconfont icon-zanting" style="display:none"></i>
 <i id='next' class="iconfont icon-icon1"></i>
 </div>
 <span id='info' class='info'></span>
 
</div>

为了方便定位，我们将 trackBox 画在music盒子里面。

.trackBox {
 position:absolute;
 width:400px;
 height:220px;
 border: 1px solid #ccc;
 z-index: 3;
 background: #333;
 left:210px;
 top : -2px;
 border-radius: 6px;
}

2. 画第一条音轨

<div id='trackBox' class="trackBox">
 <i class='items'></i>
</div>
.trackBox .items {
 position: absolute;
 width:10px;
 height:100px;
 background:#eee;
}

我们希望音轨靠着下方，并且它们之间能有一个区分，于是添加这两个属性：

bottom:0px;
border: 1px solid #ccc;

OK，下来了。

2. 画所有的音轨

一个音轨肯定不够，我们需要根据音轨盒子的宽度和每一条音轨的宽度，来计算出一共需要多少条音轨：

/*获取音轨盒子*/
var trackBox = utils.dom('#trackBox');
/*音轨盒子的宽度*/
var maxWidth = trackBox.clientWidth;
/*音轨的单个宽度*/
var singleWidth = 10;
/*计算音轨的最大数量*/
var len = Math.floor(maxWidth / singleWidth) ;
alert('音轨盒子最多盛放' + len + '条音轨');

//拼接音轨
var tracks = "";
for(var i = 0;i < len; i++){
 /*计算位置*/
 var left = 10 * i + 'px';
 tracks += "<i class='items' style='left:"+left+"'></i>";
}
trackBox.innerHTML = tracks;

拼接后的效果：

2. 通过随机数让音轨动起来

之前的章节 js常用方法和一些封装（2） -- 随机数生成中，正好有一个随机数的方法，所谓养兵千日，用兵一时啊。

我们把那个随机数的方法添加到工具包：

util.js

randomNum : function (num){
 return Math.floor(Math.random()*(num+1));
}

测试：

//模拟音轨动画
setInterval(function(){
 for(var i = 0;i < len; i++){
 console.info(i);
 document.getElementsByClassName('items')[i].style.height = utils.randomNum(110) + 'px';
 }
},200);

效果：

原理就是用了一个js定时器，每隔200毫秒就改变所有音轨的高度，当然，高度是一个随机数值。

至于音轨和播放器的对接，虽然我已经写好，并且已经集成到musicBox里面，但是里面牵扯到比较多的知识点，写起来需要很多时间，所以暂且先放一放吧。

感悟

音乐播放器至此算是完成了一个1.0版本，以后看情况我会继续将这个案例更新下去，甚至还可能对接后台，连数据库等等。

在工作的日子里，我曾经迷茫过，尤其是刚开始做编程的工作时，非常迷茫。

每天都是增删改查，增删改查，就觉得很没意思。

一段时间下来，我开始迷茫了，不知道自己该学一些什么东西。

感觉技术太多，什么都想学，却又怕没时间。

在这个信息爆炸、日新月异的时代，技术更新得非常快，很多人都在各种新技术的浪潮下变得不知所措。我就有这样的体会，于是看各种书，各种视频，生怕自己跟不上时代的节奏。

可是，我一直以来都忽略了一个重点，那就是——我是否真的对这个行业感兴趣？

如果在几年前，我会说是的，正因为对计算机的兴趣，我才会放弃之前所学的专业，踏入 Java 、JavaScript 的坑中。

再后来，我发现一个道理，不论你现在的工作是什么，都请尽可能地去爱上他。不要为了生计而去做一份工作，如果实在办不到的话，就给自己撒一个美丽的谎言吧。

不然的话，软件开发到了后期你会很迷茫的。

给自己一个温馨的微笑，学着热爱这个行业，这个工作，就是对自己最大的奖赏。

享受编程的乐趣，怀着感恩的心去体会每一天生活中的细节。

在线咨询

上一篇：HTML 语法简要总结
下一篇：Javascript获取远程图片宽高

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

使用JS开发简单的音乐播放器

进度条

音轨

感悟

您的项目需求