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

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

效果图

音乐播放器

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

播放器属性归类

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

播放控制

功能：控制音乐的播放和暂停，上一首，下一首，播放完成及相应图标修改
audio所用api：audio.play() 和 audio.pause()和audio ended事件

播放进度条控制

功能：实时更新播放进度，点击进度条调整歌曲播放进度
audio所用api：audio timeupdate事件，audio.currenttime

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

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

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

歌词显示及高亮

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

播放模式设置

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

代码地址：

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