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

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

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

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. roc曲线和auc

    只是为了复习一下,在评价分类器的性能好坏时,通常用recall和precision, PS:CNN做图像分类还是用了loss 和 accuracy 使用ROC的目的在于更好的(直观+量化)评价分类模型 ...

  2. NopCommerce源码架构详解

    NopCommerce源码架构详解--初识高性能的开源商城系统cms   很多人都说通过阅读.学习大神们高质量的代码是提高自己技术能力最快的方式之一.我觉得通过阅读NopCommerce的源码,可以从 ...

  3. vs.net2015发布web网站时,提示JsonIgnoreAttribute无法找到的解决办法

    产生该问题的原因是因为项目中引用了两个版本的newtonsoft.json.dll,具体解决办法参见: 用记事本打开项目文件(*.csproj) 可以找到在这个文件中,有两处Newtonsoft.Js ...

  4. EF - Code First 开发方式

    概述: 本节介绍通过 Code First 开发建立新数据库. 借助 Code First 可以选择使用类的特性和属性执行配置,或者使用 XML 配置文件来配置,当然也可以使用 Fluent API ...

  5. Jenkins的安装配置和使用

    Jenkins的安装配置和使用 1 Jenkins介绍 w3cschool中这样介绍:Jenkins是一个独立的开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个 ...

  6. 模仿WC.exe的功能实现--node.js

    Github项目地址:https://github.com/102derLinmenmin/myWc WC 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要 ...

  7. jQuery和Vue的区别

    1.jQuery和Vue的区别 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起 ...

  8. CentOS7+Win10双系统的CentOS7启动bug

    自从安装了CentOS7系统,它的启动时间常常要三分钟以上,实在忍不了. 以下是CentOS7系统的启动记录片断: May 18 13:04:05 DESKTOP-23V3CHU kernel: XF ...

  9. DBUtils——handler

    ArrayHandler: 把结果集中的第一行数据转成对象数组. ArrayListHandler: 把结果集中的每一行数据都转成一个对象数组,再存放到List中. BeanHandler: 将结果集 ...

  10. python操作samba

    最近在部署完xxl-job后,陆续将一些日常性执行的python脚本迁移到上面去:其中部分脚本涉及到对samaba的操作,先后尝试了pysmb.fs.smbfs.pysmbclient pysmb 安 ...