服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 原生JS实现音乐播放器的示例代码

原生JS实现音乐播放器的示例代码

2022-01-22 20:15单线程_01 js教程

这篇文章主要介绍了原生JS实现音乐播放器的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文主要介绍了原生JS实现音乐播放器的示例代码，分享给大家，具体如下:

效果图

原生JS实现音乐播放器的示例代码

音乐播放器

  • 播放控制
  • 播放进度条控制
  • 歌词显示及高亮
  • 播放模式设置

播放器属性归类

按照播放器的功能划分，对播放器的属性和DOM元素归类，实现同一功能的元素和属性保存在同一对象中，便于管理和操作

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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事件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 音乐的播放和暂停，上一首，下一首控制
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

?
1
2
3
4
5
6
// 播放进度实时更新
audioFile.file.addEventListener('timeupdate', lyricAndProgressMove);
// 通过拖拽调整进度
control.progressDot.addEventListener('click', adjustProgressByDrag);
// 通过点击调整进度
control.progressWrap.addEventListener('click', adjustProgressByClick);

播放进度实时更新：通过修改相应DOM元素的位置或者宽度进行修改

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function lyricAndProgressMove() {
  const audio = audioFile.file;
  const controlIndex = control.index;
 // 歌曲信息初始化
  const songLyricItem = document.getElementsByClassName('song-lyric-item');
  if (songLyricItem.length == 0) return;
  let currentTime = audioFile.currentTime = Math.round(audio.currentTime);
  let duration = audioFile.duration = Math.round(audio.duration);
 
  //进度条移动
  const progressWrapWidth = control.progressWrap.offsetWidth;
  const currentBarPOS = currentTime / duration * 100;
  control.progressBar.style.width = `${currentBarPOS.toFixed(2)}%`;
  const currentDotPOS = Math.round(currentTime / duration * progressWrapWidth);
  control.progressDot.style.left = `${currentDotPOS}px`;
 
  songInfo.currentTimeSpan.innerText = formatTime(currentTime);
 
}

拖拽调整进度：通过拖拽移动进度条，并且同步更新歌曲播放进度

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function adjustProgressByDrag() {
  const fragBox = control.progressDot;
  const progressWrap = control.progressWrap
  drag(fragBox, progressWrap)
}
 
function drag(fragBox, wrap) {
  const wrapWidth = wrap.offsetWidth;
  const wrapLeft = getOffsetLeft(wrap);
 
  function dragMove(e) {
    let disX = e.pageX - wrapLeft;
    changeProgressBarPos(disX, wrapWidth)
  }
  fragBox.addEventListener('mousedown', () => { //拖拽操作
    //点击放大方便操作
    fragBox.style.width = `14px`;fragBox.style.height = `14px`;fragBox.style.top = `-7px`;
    document.addEventListener('mousemove', dragMove);
    document.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove', dragMove);
      fragBox.style.width = `10px`;fragBox.style.height = `10px`;fragBox.style.top = `-4px`;
    })
  });
}
 
function changeProgressBarPos(disX, wrapWidth) { //进度条状态更新
  const audio = audioFile.file
  const duration = audioFile.duration
  let dotPos
  let barPos
 
  if (disX < 0) {
    dotPos = -4
    barPos = 0
    audio.currentTime = 0
  } else if (disX > 0 && disX < wrapWidth) {
    dotPos = disX
    barPos = 100 * (disX / wrapWidth)
    audio.currentTime = duration * (disX / wrapWidth)
  } else {
    dotPos = wrapWidth - 4
    barPos = 100
    audio.currentTime = duration
  }
  control.progressDot.style.left = `${dotPos}px`
  control.progressBar.style.width = `${barPos}%`
}

点击进度条调整：通过点击进度条，并且同步更新歌曲播放进度

?
1
2
3
4
5
6
7
8
function adjustProgressByClick(e) {
 
  const wrap = control.progressWrap;
  const wrapWidth = wrap.offsetWidth;
  const wrapLeft = getOffsetLeft(wrap);
  const disX = e.pageX - wrapLeft;
  changeProgressBarPos(disX, wrapWidth)
}

歌词显示及高亮

功能：根据播放进度，实时更新歌词显示，并高亮当前歌词（通过添加样式）
audio所用API：audio timeupdate事件，audio.currentTime

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 歌词显示实时更新
audioFile.file.addEventListener('timeupdate', lyricAndProgressMove);
 
function lyricAndProgressMove() {
  const audio = audioFile.file;
  const controlIndex = control.index;
 
  const songLyricItem = document.getElementsByClassName('song-lyric-item');
  if (songLyricItem.length == 0) return;
  let currentTime = audioFile.currentTime = Math.round(audio.currentTime);
  let duration = audioFile.duration = Math.round(audio.duration);
  let totalLyricRows = lyric.totalLyricRows = songLyricItem.length;
  let LyricEle = lyric.ele = songLyricItem[0];
  let rowsHeight = lyric.rowsHeight = LyricEle && LyricEle.offsetHeight;
  //歌词移动
  lrcs[controlIndex].lyric.forEach((item, index) => {
    if (currentTime === item.time) {
      lyric.currentRows = index;
      songLyricItem[index].classList.add('song-lyric-item-active');
      index > 0 && songLyricItem[index - 1].classList.remove('song-lyric-item-active');
      if (index > 5 && index < totalLyricRows - 5) {
        songInfo.lyricWrap.scrollTo(0, `${rowsHeight * (index - 5)}`)
      }
 
    }
  })
}

播放模式设置

功能：点击跳转播放模式，并修改相应图标
audio所用API：无

?
1
2
3
4
5
6
7
8
9
10
11
12
// 播放模式设置
control.mode.addEventListener('click', changePlayMode);
 
function changePlayMode() {
  modeControl.index = ++modeControl.index % 3;
  const mode = control.mode;
  modeControl.index === 0 ?
    mode.setAttribute("class", "playerIcon songCycleOrder") :
    modeControl.index === 1 ?
      mode.setAttribute("class", "playerIcon songCycleRandom ") :
      mode.setAttribute("class", "playerIcon songCycleOnly")
}

项目预览

代码地址：https://github.com/hcm083214/audio-player

到此这篇关于原生JS实现音乐播放器的示例代码的文章就介绍到这了,更多相关JS 音乐播放器内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://juejin.cn/post/6932662088250687501

  • JS
  • 音乐播放器

    • 延伸 · 阅读

    精彩推荐
    • js教程原生js 实现表单验证功能

      原生js 实现表单验证功能

      这篇文章主要介绍了原生js如何实现表单验证功能，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下...

      蒋伟平7042022-01-19
    • js教程在JavaScript中查找字符串中最长单词的三种方法(推荐)

      在JavaScript中查找字符串中最长单词的三种方法(推荐)

      这篇文章主要介绍了在JavaScript中查找字符串中最长单词的三种方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋...

      Hunter网络安全7342022-01-04
    • js教程JavaScript canvas实现雨滴特效

      JavaScript canvas实现雨滴特效

      这篇文章主要为大家详细介绍了JavaScript canvas实现雨滴特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      huangdong19317022021-12-29
    • js教程JS中锚点链接点击平滑滚动并自由调整到顶部位置

      JS中锚点链接点击平滑滚动并自由调整到顶部位置

      这篇文章主要介绍了JS中锚点链接点击平滑滚动并自由调整到顶部位置,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的...

      是这样的三月6362022-01-19
    • js教程js实现验证码干扰（静态）

      js实现验证码干扰（静态）

      这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      lzh~5172022-01-22
    • js教程原生JavaScript实现随机点名表

      原生JavaScript实现随机点名表

      这篇文章主要为大家详细介绍了原生JavaScript实现随机点名表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      栋栋很优秀啊9822021-12-31
    • js教程通过滑动翻页效果实现和移动端click事件问题

      通过滑动翻页效果实现和移动端click事件问题

      这篇文章主要介绍了滑动翻页效果实现和移动端click事件问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需...

      行舟客5392022-01-07
    • js教程js事件模型与自定义事件实例解析

      js事件模型与自定义事件实例解析

      JavaScript一个最简单的事件模型，需要有事件绑定与触发，还有事件删除。本文将对其具体实现代码进行解析，需要的朋友一起来看下吧...

      caihg5652021-12-15
    最近更新
    编辑推荐
    阅读排行
    热门标签
    签字板 　 文字时钟 　 Object.assign 　 removeAttribute 　 attachEvent 　 并发请求控制 　 选择图片 　 电灯开关 　 随机图形 　 点击切换 　 防止重复 　 规则集 　 arcgis.js 　 关闭广告 　 Nest.js 　 SSG 　 onShareTimeline 　 点餐程序 　 胶囊 　 mustache.js 　 元件 　 悬浮图标 　 按钮角标 　 鼠标拖曳 　 AutoJs 　 Strve.js 　 蒙板 　 mapboxgl 　 轨迹线 　 多层次 　
    © 2019-2022 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图