原生JS实现音乐播放器
程序员文章站
2022-09-06 18:21:45
本文实例为大家分享了js实现音乐播放器的具体代码,供大家参考,具体内容如下首先,使用html搭好我们的框架结构。这一步为了提高我们代码的可读性,多写注释。第二步,搭好框架后,就用css给他写上你喜欢的...
本文实例为大家分享了js实现音乐播放器的具体代码,供大家参考,具体内容如下
首先,使用html搭好我们的框架结构。这一步为了提高我们代码的可读性,多写注释。
第二步,搭好框架后,就用css给他写上你喜欢的样式。注意这里我是将样式分为了公共样式和独立样式分开写的,提高代码可重复利用,当然你也可以使用sass更方便,这里我只提供了独立样式,公共样式可以在网上自主寻找。
第三步,也是让音乐播放器具有灵魂的东西,使用js添加功能。
1.获取id(当然这里也可以获取类名或是元素,看你自己的习惯)。
2.添加音乐播放功能。
导入音乐
音乐播放
音乐播放暂停
音乐切换
3.添加进度条。
小功能:点击进度条,音乐也跟着变化跳转到指定的时间。
4.添加音量调节模块。
全部js代码
这里我使用了{}作用域,让let 或 const声明的变量只在 let 或 const命令所在的代码块 {} 内有效,在 {} 之外不能访问(ecmascript 6(简称es6)中新增的)。
最终效果展示:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: JavaScript实现点击切换功能