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

最新推荐文章于 2024-07-16 01:25:59 发布

酔清风

最新推荐文章于 2024-07-16 01:25:59 发布

阅读量571

点赞数 1

分类专栏： web 文章标签： html javascript 前端 html5 vue.js

本文链接：https://blog.csdn.net/weixin_42686892/article/details/114046232

版权

本文介绍了如何使用原生JavaScript构建音乐播放器，涵盖播放控制、播放进度条管理、歌词显示与高亮以及播放模式设置。通过归类播放器属性，利用audio API如play(), pause(), timeupdate事件等实现各项功能。" 112649209,10293758,自动喷水灭火系统工作原理详解,"['消防系统', '灭火技术', '安全工程', '建筑安全', '自动控制']

摘要由CSDN通过智能技术生成

é¿éæ¶æå¸å¸¦ä½ ä½¿ç¨åç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