原生JavaScript达成一个音乐播放器代码

发布时间：2022-04-20 08:40:53 所属栏目：语言来源：互联网

导读：这篇文章就是主要介绍用原生JavaScript来实现一个简易的音乐播放器，其功能效果包括播放的控制，音乐进度条的控制，歌词的显示和高亮以及播放模式的设置。感谢的朋友就继续往下看吧。音乐播放器播放控制播放进度条控制歌词显示及高亮播放模式设置播放

这篇文章就是主要介绍用原生JavaScript来实现一个简易的音乐播放器，其功能效果包括播放的控制，音乐进度条的控制，歌词的显示和高亮以及播放模式的设置。感谢的朋友就继续往下看吧。

音乐播放器
播放控制
播放进度条控制
歌词显示及高亮
播放模式设置
播放器属性归类
      按照播放器的功能划分，对播放器的属性和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'),

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 {
    //音乐暂停，更改图标及暂停播放动画

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Tomcat下载和安置	装饰器模式装饰设计模
无用单元采集垃圾回收	Java访问对象的属性和