这是一篇关于播放器简单制作的博客。使用于入门级的朋友。功能主要实现了列表点击播放、播放及暂停、上下曲的切换及进图条和时间显示。
一、介绍
开发语言：Javascript
开发工具：Hbuilder
开发日期：2019-09-22
作者：CodingmanNAN
播放器由播放列表、暂停播放、进度条、歌手专辑图片文本及歌词组成。
二、代码实现
代码方面js部分注释详细，极易理解~
（1）HTML部分
<body>
<div class="mod_player">
<!-- 播放器组件 -->
<div class="player__hd">
<audio id="Music" src="Audio/周传雄 - 寂寞沙洲冷.mp3" loop="loop"></audio>
</div>
<!-- 上半部左侧 -->
<div class="player_style_normal js_box js_full_box" style="display: block>
<ul class="songlist__header">
<li class="songlist__header_name">歌曲</li>
<li class="songlist__header_author">歌手</li>
<li class="songlist__header_time">时长</li>
</ul>
<i class="player_songlist__line"></i>
</div>
<!-- 寂寞沙洲冷 -->
<ul class="songlist__list" id="song_box">
<li mid="1334012" ix="0" data-page="player">
<div class="songlist__number">1</div>
<div class="songlist__songname">
<span class="songlist__songname_txt" title="寂寞沙洲冷">寂寞沙洲冷</span>
<div class="mod_list_menu">
<a href="javascript:;" class="list_menu__item list_menu__play js_play" title="播放">
<i class="list_menu__icon_play" οnclick="listGetMusic(0)"></i>
<span class="icon_txt">播放</span></a>
</div>
</div>
<div class="songlist__artist" title="周传雄">
<a href="#" title="周传雄" class="singer_name">周传雄</a>
</div>
<div class="songlist__time">04:34</div>
<div class="songlist__other"></div>
<a href="javascript:;" class="songlist__delete js_delete" title="删除">
<span class="icon_txt">删除</span></a>
<i class="player_songlist__line"></i>
</li>
</ul>
</div>
<div class="scroll_bar_cont sb_thumb_cont" style="height: 225px;"></div>
<!-- 上半部右侧 -->
<div class="mod_song_info" id="song_info">
<div class="song_info__info">
<a href="javascirpt:;" class="song_info__cover js_album">
<img src="playerimg/20150718201920673262.jpg" id="song_pic" alt="" class="song_info__pic">
</a>
<div class="song_info__name" id="song_name">歌曲名：
<a href="#" title="寂寞沙洲冷" class="js_song">寂寞沙洲冷</a>
</div>
<div class="song_info__singer" id="singer_name">歌手名：
<a href="#" title="周传雄" class="js_singer">周传雄</a>
</div>
<div class="song_info__album" id="album_name">专辑名：
<a href="#" title="星空下的传说" target="_blank">星空下的传说</a>
</div>
</div>
<div class="song_info__lyric">歌词部分</div>
</div>
<!-- 尾部按钮及主要功能建 -->
<div class="player__ft" id="opbanner">
<a href="javascript:;" class="btn_big_prev" title="alt+←" οnclick="getMusicPrev()">
<span class="icon_txt">上一首</span>
</a>
<a href="javascript:;" class="btn_big_play" id="btnplay" title="[空格]" οnclick="getMusicPlay()">
<span class="icon_txt">播放</span>
</a>
<a href="javascript:;" class="btn_big_next" title="alt+→" οnclick="getMusicNext()">
<span class="icon_txt">下一首</span>
</a>
<div class="player_music">
<div class="player_music__info" id="sim_song_info">
<a href="#" title="寂寞沙洲冷" class="js_song_btn">寂寞沙洲冷</a> -
<a href="#" title="周传雄" class="js_singer_btn">周传雄</a>
</div>
<div class="player_music__time" id="time_show">00:00 / 04:34</div>
<div class="player_progress" id="progress">
<div class="player_progress__inner" id="spanplayer_bgbar">
<!-- 加载条 -->
<div class="player_progress__load" id="downloadbar"></div>
<!-- 进度条原点 -->
<div class="player_progress__play" style="width: 0%;" id="spanplaybar">
<i class="player_progress__dot" id="spanprogress_op"></i>
</div>
</div>
</div>
</div>
</body>（2）Javascript 部分
var music = document.getElementById("Music");
/* 开始or暂停 按钮 */
var btnplay = document.getElementById("btnplay");
/* 获取MP3地址 */
var audio = document.querySelector("audio");
/* 获取背景图片 */
var bodyBg = document.querySelector(".bgColor");
/* 获取专辑Logo */
var songerLogo = document.getElementById("song_pic");
/* 获取歌曲名 */
var songName = document.querySelector(".song_info__name a");
var btnSongname = document.querySelector(".player_music__info .js_song_btn");
/* 获取歌手名 */
var singer = document.querySelector(".song_info__singer a");
var btnSinger = document.querySelector(".player_music__info .js_singer_btn");
/* 获取专辑名 */
var album = document.querySelector(".song_info__album a");
/* 播放or暂停 */
var btnplay = document.getElementById("btnplay");
/* 获取时长 */
var timer = document.getElementById("time_show");
/* 进度条 */
var bgbar = document.getElementById("spanplayer_bgbar");
/* 进度条原点 */
var playbar = document.getElementById("spanplaybar");
/* 列表点击歌曲字体#31C27C显示 */
var item = document.querySelectorAll(".songlist__list");
var item_name = document.querySelectorAll(".singer_name");
/* MP3地址 */
var musicArr = ["Audio/周传雄%20-%20寂寞沙洲冷.mp3", "Audio/周传雄%20-%20黄昏%20(Live).mp3", "Audio/周传雄%20-%20青花.mp3", "Audio/周传雄%20-%20弱水三千.mp3", "Audio/周传雄%20-%20冬天的秘密.mp3", "Audio/Jam%20-%20七月上.mp3", "Audio/张国荣%20-%20当年情%20(Live).mp3", "Audio/张国荣%20-%20千千阕歌%20(Live).mp3", "Audio/李健%20-%20贝加尔湖畔.mp3","Audio/张国荣%20-%20倩女幽魂%20(粤语).mp3"];
/* 歌曲名 */
var musicName = ["寂寞沙洲冷", "黄昏", "青花", "弱水三千", "冬天的秘密", "七月上", "当年情", "千千阙歌", "贝加尔湖畔", "倩女幽魂"];
/* 歌手名 */
var musicSongername = ["周传雄", "周传雄", "周传雄", "周传雄", "周传雄", "Jam", "张国荣", "张国荣", "李健", "张国荣", ];
/* 专辑名 */
var musicAlbum = ["星空下的传说", "忘记", "蓝色土耳其", "蓝色土耳其", "恋人创世纪", "Jam", "张国荣", "Miss You Much, Leslie", "依然", "Summer Romance", ];
/* 背景图片 */
var musicBgimg = ["playerimg/Zhoubgcolor1.png", "playerimg/Zhoubgcolor2.png", "playerimg/Li3.png", "playerimg/Li4.png", "playerimg/Li6.png", "playerimg/Qi.png", "playerimg/Zhangbgcolor5.png", "playerimg/Zhangbgcolor4.png", "playerimg/Li2.png", "playerimg/Zhangbgcolor5.png",];
/* 专辑Logo */
var musicSongerLogo = ["playerimg/20150718201920673262.jpg", "playerimg/20150718234857939637.jpg", "playerimg/20150720140656624193.jpg", "playerimg/20150718234857939637.jpg", "playerimg/20160909014901117286.jpg", "playerimg/QiLogo2.jpg", "playerimg/zhang.jpg", "playerimg/zhangLogo2.jpg", "playerimg/liLogo1.jpg", "playerimg/zhangLogo1.jpg"];
var now = 0;
/* getMain() 封装公用事件调用函数 */
function getMain(x){
/* 歌曲地址 */
audio.src = this.musicArr[x];
/* 背景图 */
bodyBg.style.backgroundImage = "url("+musicBgimg[x]+")";
/* 歌手Logo */
songerLogo.src = this.musicSongerLogo[x];
/* 歌曲名 */
songName.innerHTML = musicName[x];
songName.title = musicName[x];
btnSongname.innerHTML = musicName[x];
btnSongname.title = musicName[x];
/* 歌手名 */
singer.innerHTML = musicSongername[x];
singer.title = musicSongername[x];
btnSinger.innerHTML = musicSongername[x];
btnSinger.title = musicSongername[x];
/* 专辑名*/
album.innerHTML = musicAlbum[x];
album.title = musicAlbum[x];
/* 列表点击显示选中的歌曲目标 */
for(var i = 0; i <= item.length-1; i++){
item[i].style.color = "rgba(225,225,225,.8)";
item_name[i].style.color = "rgba(225,225,225,.8)";
}
item[now].style.color = "#31C27C" ;
item_name[now].style.color = "#31c27c";
/* 播放 */
audio.play();
}
/* 列表点击播放 */
function listGetMusic(x){
getMain(x);
btnplay.className = "btn_big_play btn_big_play--pause"; // 显示暂停图标
}
/********** 全部播放 ***********/
function getMusicPlay() {
console.log(audio.paused)
if(audio.paused){
btnplay.className = "btn_big_play btn_big_play--pause";
item[0].style.color = "#31C27C" ;
item_name[0].style.color = "#31c27c";
audio.play();
}else{
console.dir(btnplay); // 显示点击事件后btnplay更改详情。
btnplay.className = "btn_big_play";
audio.pause();
}
}
/********** 上一首 ***********/
function getMusicPrev(){
if(now <= 0){
now = musicArr.length;
}
now--;
getMain(now);
}
/********** 下一首 ***********/
function getMusicNext(){
now++;
if(now > musicArr.length-1){
now = 0;
getMain(now);
}
getMain(now);
}
audio.ontimeupdate = function(){
var pre = audio.currentTime / audio.duration * 200; // 显示当前播放秒数
var wid = pre / audio.duration * 100 ; // 显示当前秒数所占歌曲长度的百分比
var preWid = wid.toFixed(3); // 保留 wid 小数点后三位小数
console.log(preWid + "%"); // 显示当前秒数所占歌曲长度的百分比
playbar.style.width = preWid + "%"; // 进度条原当前点位置 ，以百分比形式表示
timer.innerHTML = Timer(audio.currentTime) + "/" + Timer(audio.duration); // 时长进度显示
}
/* 总时长换分秒 */
function Timer(timeNumber){
var min = parseInt(timeNumber / 60 );
var sec = parseInt(timeNumber % 60);
min = min >= 10 ? min : "0" + min;
sec = sec >= 10 ? sec : "0" + sec;
return min + ":" + sec;
}JS部分的功能实现主要以依赖于数组存储相应数据，再通过获取各相应元素节点改变元素属性。
其中进度条的该表依赖于ontimeupdate 事件与currentTime的配合使用。
* ontimeupdate监听事件
* ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发.
* · 播放视频/音频（audio/video）
* · 重新定位视频/音频（audio/video）的播放位置。
* 注 ：ontimeuodate事件与currentTime一起使用，可返回video/audio的当前播放位置 !
三、总结
播放器的页面实现基本通过HTML+CSS即可实现，播放器的具体操作所涉及的Javascript知识主要为js的入门级操作，了解相应的循环判断、条件判断、函数封装、基本事件、DOM操作等功能的使用即可大致实现主要的功能。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
