好程序员前端分享 使用 JS 开发简单的音乐播放器 , 最近,我们在教学生使用 JavaScript ,今天就带大家开发一款简单的音乐播放器。首先,最终效果如图所示:
首先,我们来编写 html 界面 index.html ,代码如下 :
<! DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title ></ title >
< link rel = "stylesheet" type = "text/css" href = "css/style.css" />
< script src = "js/jquery-2.1.0.js" type = "text/javascript" charset = "utf-8" ></ script >
< script src = "js/common.js" type = "text/javascript" charset = "utf-8" ></ script >
</ head >
< body >
<!-- 播放器 -->
< audio id = "song" autoplay = "autoplay" ></ audio >
<!-- 整体结构 -->
< div id = "boxDiv" >
<!-- 歌词展示区域 -->
< div id = "contentDiv" >
<!-- 歌词显示 -->
< div id = "lrcDiv" ></ div >
<!-- 上部阴影 -->
< span id = "bgTopSpan" ></ span >
<!-- 下部阴影 -->
< span id = "bgBottomSpan" ></ span >
</ div >
<!-- 控制区域 -->
< div id = "controlDiv" >
<!-- 进度条 -->
< div id = "progressDiv" ></ div >
<!-- 进度条圆点 -->
< img id = "pointerImg" src = "img/audio/progress_pointer@2x.png" />
<!-- 播放时间 -->
< span id = "playTimeSpan" >00:00</ span >
<!-- 歌曲标题 -->
< span id = "titleSpan" ></ span >
<!-- 总时间 -->
< span id = "totalTimeSpan" >00:00</ span >
<!-- 按钮区域 -->
< div id = "buttonDiv" >
<!-- 上一首按钮 -->
< img id = "prevImg" src = "img/audio/play_above_song@2x.png" />
<!-- 播放暂停按钮 -->
< img id = "playOrPauseImg" src = "img/audio/play@2x.png" />
<!-- 下一首按钮 -->
< img id = "nextImg" src = "img/audio/play_next_song@2x.png" />
</ div >
</ div >
</ div >
</ body >
</ html >
接下来,编写 style.css ,代码如下:
body {
margin : px ;
background-color : #ccc ;
}
#boxDiv {
width : 375 px ;
height : 568 px ;
margin : 10 px auto ;
position : relative ;
}
#contentDiv {
width : 375 px ;
height : 460 px ;
background-image : url(../img/audio/play_bg@2x.png);
overflow : hidden ;
}
#lrcDiv {
margin-top : 260 px ;
}
#lrcDiv span {
display : block ;
line-height : 40 px ;
text-align : center;
color : white;
font-size : 20 px ;
}
#bgTopSpan {
position : absolute ;
display : block ;
width : 375 px ;
height : 30 px ;
top : px ;
background-image : url(../img/audio/play_top_shadow@2x.png);
}
#bgBottomSpan {
top : 430 px ;
position : absolute ;
background-image : url(../img/audio/play_bottom_shadow@2x.png);
display : block ;
width : 375 px ;
height : 30 px ;
}
#controlDiv {
width : 375 px ;
height : 180 px ;
position : relative ;
background-color : white;
}
#progressDiv {
background-color : red;
height : 1.5 px ;
width : px ;
}
#pointerImg {
width : 18 px ;
height : 18 px ;
position : absolute ;
top : -8.5 px ;
left : -3 px ;
}
#playTimeSpan {
display : block ;
position : absolute ;
font-size : 14 px ;
width : 35 px ;
top : 5 px ;
left : 5 px ;
}
#totalTimeSpan {
display : block ;
position : absolute ;
font-size : 14 px ;
width : 35 px ;
top : 5 px ;
left : 335 px ;
}
#titleSpan {
display : block ;
position : absolute ;
height : 30 px ;
width : 295 px ;
font-size : 20 px ;
text-align : center;
left : 40 px ;
top : 5 px ;
}
#buttonDiv {
margin-top : 40 px ;
position : relative ;
}
#prevImg {
width : 40 px ;
height : 40 px ;
position : absolute ;
top : 20 px ;
left : 60 px ;
}
#playOrPauseImg {
width : 70 px ;
height : 70 px ;
position : absolute ;
top : 5 px ;
left : 152 px ;
}
#nextImg {
width : 40 px ;
height : 40 px ;
position : absolute ;
top : 20 px ;
left : 275 px ;
}
最后,编写 common.js ,代码如下:
$( function (){
// 歌曲列表
var playList = [ " 红日 " , " 狼的诱惑 " , " 漂洋过海来看你 " ];
// 当前播放的歌曲序号
var currentIndex = ;
// 播放器的原生对象
var audio = $( "#song" )[ ];
// 播放时间数组
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 = ; i < arr.length; i ++ ) {
// 分割时间和歌词
var tempArr = arr[i].split( "]" );
if (tempArr.length > 1 ){
// 添加时间和歌词到数组
timeArr.push(tempArr[ ]);
lrcArr.push(tempArr[ 1 ]);
}
}
// 显示歌词
for ( var i = ; 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 == ){
currentIndex = playList.length - 1 ;
} else {
currentIndex -- ;
}
// 播放前设置
setup();
// 播放
playMusic();
});
// 下一首
$( "#nextImg" ).click( function (){
// 如果是最后一首,就跳到第一首
if (currentIndex == playList.length - 1 ){
currentIndex = ;
} 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 = ; 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[ ]);
// 秒
var s = parseFloat(tempArr[ 1 ]);
return m * 60 + s;
}
return ;
}
// 格式化时间( 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;
}
});
图片和歌曲、歌词请自行下载,最后,可以运行试试了。
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2646226/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/69913892/viewspace-2646226/