在写之前先说下我遇到得两个问题,第一个问题是,在音乐标签,我希望得是切换数据做到得,但是出了问题,暂时为解决,第二个问题,页面切换时音乐继续播放由卡顿情况,未处理好。

好了,那我们开始做这个音乐播放器吧。

先撸一下思路,我们需要做些什么

1.一个播放器的视图,(我截取了我的视图)

2.播放器的功能(视图已经说明);

那么现在,开始代码

开始代码前说一句:这个是在你已经铺画好页面的前提下

创建视频列表 在功能区放置你的音频列表

2.为了方便拿到每个音频,我们还需要创建一个数组

play就是这个数组。

3.点击播放/停止功能

4.下一曲(你需要拿到当前你所播放的音乐的下标,请注意我的第一张图上的audioIndex,它默认的是0,但你再点击下一曲的时候需要为它+1, currentTime是当前音频的播放时间,在你播放下一首的时候,一定注意把上一首音频播放时间清0);

5.上一曲(同上边的逻辑-1)

当完成以上功能,已经大致的写出来播放器的基本功能,但是我们忘了这个

6.我们的时间线。

这是样式结构,可以参考一下,当然有更好的也可以给我留言,

这是音频播放的时间线

7.现在除了切换页面和音频的倍速,我们都已经完成了,那么先放一张音频的倍速视图

倍速其实就是playbackRate这个参数,修改它,就可以达到你的效果

8.切换页面继续播放(在我的处理方法中,是存在有问题的,切换中会有卡顿,用户体验会很差)

现在用的处理逻辑是将当前音频播放的下标和播放时间以及播放状态都存起来,

在新的页面中拿到,首先判断当前音频是否播放,如果播放,那就拿它的下标和播放时间,进行播放

以上就是完成的播放器了!!!

如果有什么不懂的可以直接留言,有什么修改意见也欢迎留言,不对的地方欢迎指出,将不胜感激!!!

参考地址:https://www.cnblogs.com/1996zy/p/7675232.html#3812552

js 音乐播放器的更多相关文章

  1. 基于jplayer实现歌词同步的JS音乐播放器效果

    分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <textare ...

  2. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  3. Asp.Net MVC中Aplayer.js音乐播放器的使用

    1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...

  4. 10个免费开源的JS音乐播放器插件

    点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...

  5. js音乐播放器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=&quo ...

  6. js音乐播放器【简洁】

    辞职的第二天没有去找工作还,准备回家. 但到了火车站才发现沃特玛的买的票不是在这个火车站坐. 这就耽误了行程...... 说出来真舒服!!!淦 代码 这里已经上传到码云了,大家可以直接引用. 目前只有 ...

  7. 原生JS实现音乐播放器!

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  8. 小型音乐播放器插件APlayer.js的简单使用例子

      本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...

  9. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

随机推荐

  1. [English] Time complexity wise this solution is the best among all

    Time complexity wise this solution is the best among all, we can do all operations in O(1) time. 时间复 ...

  2. vue 无限递归级联组件实现方案

    最终组件效果图: 无限级联组件实现思想: 在这里有一个很重要的地方就是前端组件如何与后端匹配方法协调好,无限级联很好实现,但是如何让服务器端可以成功的匹配到条件是一个问题,在这里我借鉴了html元素的 ...

  3. Vue.js——60分钟快速入门(转)

    vue:Vue.js——60分钟快速入门 <!doctype html> <html lang="en"> <head> <meta ch ...

  4. ArcGIS制作tpk离线压缩包

    ArcGIS制作tpk离线压缩包 tpk是什么的缩写,对应的中文名称是? 什么叫tpk文件? 缓存切片? 切片类型:紧凑型与稀疏型.   一.目前自己使用的在ArcMap中制作tpk压缩包 1.首先打 ...

  5. 深深感受 Promise.all 带来的速度提升

    什么是Promise Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.(摘抄自 阮一峰老师的 ECMAScript 6 入门).具体请查看阮一峰老师的这 ...

  6. linux-基础命令篇-02

    基本命令:--LS 关于显示的颜色含义: 白色:表示普通文件 蓝色:表示目录 绿色:表示可执行文件 红色:表示压缩文件 浅蓝色:链接文件 红色闪烁:表示链接的文件有问题 黄色:表示设备文件 灰色:表示 ...

  7. background-size cover和contain的用法详解

    我们还可以通过background-size来控制背景图片的尺寸. background-size有几个属性值,常用的是cover和contain.那么background-size:cover和co ...

  8. 使用Python+turtle绘制动画重现龟兔赛跑现场

    问题描述: 在经典的龟兔赛跑故事中,兔子本来是遥遥领先的,结果因为骄傲,居然在比赛现场睡了一觉,醒来后发现乌龟已经快到终点了,于是赶紧追赶,无奈为时已晚,最终输掉了比赛.本文使用turtle绘制乌龟和 ...

  9. 设计模式-builder(构造器模式)

    好处: 多个属性时,可以清楚明了知道属性, 重叠构造起器的安全性和JavaBeans模式的可读性 只需要制定需要建造的类型就可以得到他们 实例: public class NutritionFacts ...

  10. 学习poisson.c

    static char help[] = "A structured-grid Poisson problem with DMDA+KSP.\n\n"; #include < ...