这篇文章主要介绍了使用JavaScript编写一个音乐播放器，此处通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下：
JavaScript是什么JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
音乐播放器
播放控制
播放进度条控制
歌词显示及高亮
播放模式设置
播放器属性归类
按照播放器的功能划分，对播放器的属性和DOM元素归类，实现同一功能的元素和属性保存在同一对象中，便于管理和操作
const control = { //存放播放器控制
play: document.querySelector('#myplay'),
...
index: 2,//当前播放歌曲序号
...
}
const audioFile = { //存放歌曲文件及相关信息
file: document.getElementsByTagName('audio')[0],
currentTime: 0,
duration: 0,
}
const lyric = { // 歌词显示栏配置
ele: null,
totalLyricRows: 0,
currentRows: 0,
rowsHeight: 0,
}
const modeControl = { //播放模式
mode: ['顺序', '随机', '单曲'],
index: 0
}
const songInfo = { // 存放歌曲信息的DOM容器
name: document.querySelector('.song-name'),
...
}播放控制
功能：控制音乐的播放和暂停，上一首，下一首，播放完成及相应图标修改
audio所用API：audio.play() 和 audio.pause()和audio ended事件
// 音乐的播放和暂停，上一首，下一首控制
control.play.addEventListener('click',()=>{
control.isPlay = !control.isPlay;
playerHandle();
} );
control.prev.addEventListener('click', prevHandle);
control.next.addEventListener('click', nextHandle);
audioFile.file.addEventListener('ended', nextHandle);
function playerHandle() {
const play = control.play;
control.isPlay ? audioFile.file.play() : audioFile.file.pause();
if (control.isPlay) {
//音乐播放，更改图标及开启播放动画
play.classList.remove('songStop');
play.classList.add('songStart');
control.albumCover.classList.add('albumRotate');
control.albumCover.style.animationPlayState = 'running';
} else {
//音乐暂停，更改图标及暂停播放动画
...
}
}
function prevHandle() { // 根据播放模式重新加载歌曲
const modeIndex = modeControl.index;
const songListLens = songList.length;
if (modeIndex == 0) {//顺序播放
let index = --control.index;
index == -1 ? (index = songListLens - 1) : index;
control.index = index % songListLens;
} else if (modeIndex == 1) {//随机播放
const randomNum = Math.random() * (songListLens - 1);
control.index = Math.round(randomNum);
} else if (modeIndex == 2) {//单曲
}
reload(songList);
}
function nextHandle() {
const modeIndex = modeControl.index;
const songListLens = songList.length;
if (modeIndex == 0) {//顺序播放
control.index = ++control.index % songListLens;
} else if (modeIndex == 1) {//随机播放
const randomNum = Math.random() * (songListLens - 1);
control.index = Math.round(randomNum);
} else if (modeIndex == 2) {//单曲
}
reload(songList);
}播放进度条控制
功能：实时更新播放进度，点击进度条调整歌曲播放进度
audio所用API：audio timeupdate事件，audio.currentTime
// 播放进度实时更新
audioFile.file.addEventListener('timeupdate', lyricAndProgressMove);
// 通过拖拽调整进度
control.progressDot.addEventListener('click', adjustProgressByDrag);
// 通过点击调整进度
control.progressWrap.addEventListener('click', adjustProgressByClick);
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
