js 音乐播放器
在写之前先说下我遇到得两个问题,第一个问题是,在音乐标签,我希望得是切换数据做到得,但是出了问题,暂时为解决,第二个问题,页面切换时音乐继续播放由卡顿情况,未处理好。
好了,那我们开始做这个音乐播放器吧。
先撸一下思路,我们需要做些什么
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 音乐播放器的更多相关文章
- 基于jplayer实现歌词同步的JS音乐播放器效果
分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <textare ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- Asp.Net MVC中Aplayer.js音乐播放器的使用
1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...
- 10个免费开源的JS音乐播放器插件
点这里 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些 网页播放器 插件比较少见,所以这里为大家整理一个集合,也许会有用到的时候. 下面整理的播放器有些是支持自适应的, ...
- js音乐播放器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=&quo ...
- js音乐播放器【简洁】
辞职的第二天没有去找工作还,准备回家. 但到了火车站才发现沃特玛的买的票不是在这个火车站坐. 这就耽误了行程...... 说出来真舒服!!!淦 代码 这里已经上传到码云了,大家可以直接引用. 目前只有 ...
- 原生JS实现音乐播放器!
前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...
- 小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...
- JS实现音乐播放器
JS实现音乐播放器 前 言 最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...
随机推荐
- Cordova入门系列(一)创建项目
Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的,原理是什么.经常会有这样的困惑: 它是一个可 ...
- postgis 随笔
一.表的定义: 对于任何一种关系型数据库而言,表都是数据存储的最核心.最基础的对象单元.现在就让我们从这里起步吧. 1. 创建表: CREATE TABLE products ( ...
- 『计算机视觉』Generalized Intersection over Union: A Metric and A Loss for Bounding BoxRegression
论文地址:Generalized Intersection over Union 一.相关工作 目标检测精度标准 度量检测优劣基本基于 IOU,mAP 是典型的基于 IOU 的标准,但是 mAP 仅有 ...
- shell脚本 快照还原Hbase数据库
#!/bin/bash for i in $(cat ./hbaseTable);do echo "disable '$i'" | hbase shellecho "re ...
- ASCII与HEX对照转换表
最近在研究ESC/POS 打印指令,时不时的就用到 ASCII和Hex的相互转换 ASCII HEX ASCII HEX ASCII HEX ASCII HEX NUL 00 DEL 10 Space ...
- PHP反射学习总结
反射(Reflection) PHP的反射机制提供了一套反射API,用来访问和使用类.方法.属性.参数和注释等,比如可以通过一个对象知道这个对象所属的类,这个类包含哪些方法,这些方法需要传入什么参数, ...
- 【Linux】grep命令
grep 命令 在文件中搜索一个单词,命令会返回一个包含 “match_pattern” 的文本行: grep match_pattern file_name grep "match_pat ...
- ceph使用对象网关
1. 介绍 三种验证客户端的方式选一种就行了 2. 安装 2.1 创建对象存储网关系统 步骤1:安装文档安装ceph 步骤2:初始化缓存网关 [root@node1 my-cluster]# ...
- sql server中如何修改视图中的数据?
sql server中如何修改视图中的数据? 我做个测试,视图的数据有标记字段时,如果是这种方式(0 as FlagState),是无法修改的 --创建视图语句 --- create view V_E ...
- colormap中的内嵌彩色模块和调用方式
内嵌彩色模块代码: import numpy as npimport matplotlib.pyplot as plt # Have colormaps separated into categori ...