阿里架构师带你使用原生JS实现音乐播放器

音乐播放器

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

播放器属性归类

按照播放器的功能划分，对播放器的属性和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');
        con