当前位置: 首页 > news >正文

js音乐播放器

场景

:如果只是前端用的话,估计不需要多讲,我的运用场景是“后台推送语音提示”

我的使用方式

:当接受的WebSocket的时候播放他

 <audio src="https://www.cbdaojia.com//yuyin/语音1 .mp3"   id="music2"></audio><script>connect();   // 连接服务端function connect() {// 创建websocketws = new WebSocket("wss://++++");// 当socket连接打开时,输入用户名//   ws.onopen = onopen;// 当有消息时根据消息类型显示不同信息ws.onmessage = onmessage; ws.onclose = function() {console.log("连接关闭,定时重连");connect();};ws.onerror = function() {console.log("出现错误");};}// 服务端发来消息时function onmessage(e){ var data = JSON.parse(e.data);var music = document.getElementById("music2");console.log(data);switch(data['type']){// 服务端ping客户端case 7:music.play();console.log("新订单");break;case 'init':var login_data = '{"type":"bind","fromid":"a0"}';console.log("websocket握手成功,发送登录数据:"+login_data);ws.send(login_data);break;}}</script>

下面是说明

`.

1、音频标准

audio 元素支持三种音频格式:ogg、mp3、wav

-IE9-Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg Vorbis--
MP3--
Wav--

2.创建audio

<audio id="audio" src="music/Serenade.mp3" preload>对不起,您的浏览器不支持HTML5音频播放。
</audio>

由上述表格可见,至少要两种音频格式才能覆盖所有浏览器,所以一般在写audio标签时候,会使用提供多种资源,浏览器会根据它对媒体类型或者编码器的支持进行选择,如下:

<!--常用-->
<audio controls>type:指定文件类型<source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">
</audio> 
属性描述
s’r’curl音频的url
autoplayautoplay音乐就绪后自动播放
controlscontrols浏览器应该提供播放插件
looploop音乐循环播放
reloadauto
meta
none
- 当页面加载后载入整个视频
- 当页面加载后只载入元数据
- 当页面加载后不载入视频

3.操作audio

方法描述
load()重新加载音频元素
play()开始播放音频
pause()暂停当前播放的音频
volume设置或返回音频的音量,取值范围(0——1)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单音乐播放器</title><link rel="stylesheet" href="css/music.css"></head><body><h3>简单音乐播放器</h3><hr /><!--音乐文件的载入--><!-- preload 属性规定是否在页面加载后载入视频。 --><audio id="audio" src="music/Serenade.mp3" preload>对不起,您的浏览器不支持HTML5音频播放。</audio><!--仿CD样式圆形图片--><div id="CDimage"><img src="image/sky.jpg" /></div><!--音量调节进度条--><!-- step:买不,间隔,每次加减的多少0,0.1,0.2 --><div><input id="volume" type="range" min="0" max="1" step="0.1" /></div><!--显示歌曲名称--><div>当前正在播放: <span id="title">小夜曲</span></div><!--音乐播放器按钮--><div><button id="prevBtn"><img src="image/previous.png" width="50" height="50" /> </button><button id="toggleBtn"><img src="image/play.png" width="50" height="50" /></button><button id="nextBtn"><img src="image/next.png" width="50" height="50" /></button></div><script>/* 获取音乐audio,音量volume,暂停播放toggleBtn,歌曲名称title */var music = document.getElementById("audio");var volume = document.getElementById("volume");var toggleBtn = document.getElementById("toggleBtn");var title = document.getElementById("title");var prevBtn = document.getElementById("prevBtn");var nextBtn = document.getElementById("nextBtn");//音乐路径列表var list = new Array("music/Serenade.mp3", "music/EndlessHorizon.mp3", "music/月光下的云海.mp3");//音乐标题列表var titleList = new Array("小夜曲", "无尽的地平线", "月光下的云海");//定义当前是第几首曲目var i = 0;toggleBtn.onclick = function() {if (music.paused) {music.play();//播放音乐toggleBtn.innerHTML = '<img src="image/pause.png" width="50" height="50"/>';} else {music.pause();//暂停音乐toggleBtn.innerHTML = '<img src="image/play.png" width="50" height="50"/>';}}//切换上一首歌曲prevBtn.onclick = function() {if (i == 0) {i = list.length - 1;} else {i--;music.pause();music.src = list[i];title.innerHTML = titleList[i];music.play();}}//切换下一首歌曲nextBtn.onclick = function() {if (i == list.length - 1)i = 0;elsei++;music.pause();music.src = list[i];title.innerHTML = titleList[i];music.play();}//设置音量大小volume.onchange=function(){music.volume = volume.value;}</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35338.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

倾情分享一个yolo3训练识别旗帜的例子

下列链接是一个yolo3识别旗子的例子 https://github.com/ZzzzzZXxxX/yolo3_keras_Flag_Detection 但是下载之后发现训练之后的模型并不好用&#xff0c;什么旗子都识别不了&#xff0c;于是换另外yolo发布版本训练这个Flag的数据 经过反复折腾终于成功。 链接&#xff1a;htt…...

Ensemble Learning

Ensemble Learning 1 高级集成技术 1.0 决策树 元素&#xff1a; 根结点&#xff1a;包含样本的全集内部节点&#xff1a;对应特征属性测试叶节点&#xff1a;代表决策结果 决策树构建一个二叉树来分割数据&#xff0c;预测时&#xff0c;在树的内部节点处用某一属性值进行判…...

vue——父子组件的数据传递

父子组件的数据传递 1、 父>子&#xff08;通过属性的形式&#xff09;&#xff1a; &#xff08;1&#xff09;在子组件的标签里设置属性【如 :count“0” 】。给属性前面加上冒号&#xff0c;参数‘0’会变成数字格式&#xff08;变为一个js表达式&#xff09;&#xff…...

真·杂项:资本论阅读笔记(随缘更新)

Chap1 商品与货币 商品的两个属性&#xff1a;使用价值和价值 商品是使用价值和价值的综合体。 使用价值&#xff1a;物品对人有用&#xff0c;价值分为质&#xff08;属性&#xff09;和量&#xff08;多少&#xff09; 交换价值&#xff1a;一种使用价值和另一种使用价值…...

HMS Core助力同程旅行,打造更贴心的用户出行体验

作为中国在线旅行行业的创新者&#xff0c;同程旅行聚焦年轻、时尚、个性的消费群体&#xff0c;致力于为用户提供更便捷、聪明、安全的出行服务。近年来&#xff0c;同程旅行通过人工智能等创新科技的应用将平台原本的交易撮合角色转变为“管家”和“助手”的角色&#xff0c;…...

C++STL算法 mismatch 中string.c_str()无法直接放到容器中

vs下的输出结果如下 .天地玄黄 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 闰余成岁 8 0 8 8 8 8 8 8 天地玄黄 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰余成岁 律吕调阳 8 0 8 8 8 8 8 8 闰余成岁 7 律吕调阳 7 #include<iostream> #include<cstdlib> #includ…...

vue简单基础

引入vue 新建vue对象 绑定作用范围 {{}} 取值 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http…...

1688API、获得商品快递费用

本帖只展示部分代码及接口 需了解更多或开发系统请移步注册测试 http://console.open.onebound.cn/console/?iRookie 测试请求地址: http://open.onebound.cn/test/? { “item”: { “num_iid”: “591734471276”, “location”: null, “area_id”: “2274”, “shipping_…...

搜索: DFS + 剪枝:木棒

题目链接&#xff1a;https://www.acwing.com/problem/content/169/ 题目&#xff1a; 乔治拿来一组等长的木棒&#xff0c;将它们随机地砍断&#xff0c;使得每一节木棍的长度都不超过 50 个长度单位。 然后他又想把这些木棍恢复到为裁截前的状态&#xff0c;但忘记了初始时有…...

160. 相交链表

给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回结果后&#…...

Prometheus rate和irate查询实现

rate 该函数用来计算某个指标在最近一个区间时间内的变化率。 比如说&#xff0c;Prometheus每15秒采集一次数据&#xff0c;当某个指标metric1的数据采集如下&#xff1a; timestampvalue15:00:001000015:00:151003015:00:301004515:00:4510090 假设当前时间为15:00:50&…...

OpenGl 基本函数 glDrawArrays 详解

本文章是转载&#xff1a;下面的几张图一目了然&#xff0c;很不多。 https://www.cnblogs.com/lxb0478/p/6381677.html glDrawArrays的功能&#xff1a;提供绘制功能&#xff0c;从数组数据中提取数据渲染基本图元。 定义 void glDrawArrays( GLenum mode, GLint first…...

清新简约教育培训汇报总结PPT-朴尔PPT

清新简约教育培训汇报总结PPT模板。一套,总结报告,工作汇报,幻灯片模板&#xff0c;内含黄色,红色多种配色&#xff0c;简约,小清新,卡通风风格设计&#xff0c;动态播放效果&#xff0c;精美实用。 希望下面这份精美的PPT模板能帮助到你 基本信息 用途&#xff1a;,总结报告…...

【AI视野·今日CV 计算机视觉论文速览 第220期】Wed, 16 Jun 2021

AI视野今日CS.CV 计算机视觉论文速览 Wed, 16 Jun 2021 Totally 76 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Is this Harmful? Learning to Predict Harmfulness Ratings from Video Authors Johan Edstedt, Johan Karlsson, Franci…...

centos7 yum安装使用时提示 cannot find a valid baseurl for repo:base/7/x86_64 的解决方法(亲测有效!)

一、报错原因 机子解析不了yum源,原因有三种情况&#xff1a; &#xff08;1&#xff09;电脑不能上网。请检查好网络配置&#xff0c;确认是可以上网了再看第二种情况。简单点就是ping一个公网的IP&#xff0c;如ping 114.114.114.114 如果ping不通&#xff0c;就是上不了网。…...

Linux线程总结

Linux 线程总结简述常用的线程相关API函数原型(3、4、5)线程创建、等待、退出API使用创建线程、等待线程线程退出、传参线程间共享数据(全局变量)互斥锁相关API使用简述互斥锁的作用互斥锁与全局变量配合使用死锁条件变量相关API的使用简述条件变量的使用条件变量的使用测试---…...

【RTT】SPI Flash 与文件系统(2):FAL

参考文档&#xff08;国内&#xff09;&#xff1a;FAL 参考文档 一、概述 FAL (Flash Abstraction Layer) &#xff0c;即 Flash 抽象层&#xff0c;是对 Flash 及基于 Flash 的分区进行管理、操作的抽象层&#xff0c;对上层统一了 Flash 及 分区操作的 API。 对于 FAL 的依赖…...

数据库索引高频面试题:java类的继承关系

前言 今天我们来说说Redis为什么高性能&#xff1f;如何做高可用&#xff1f; Redis为什么这么快&#xff1f; Redis是单线程的&#xff0c;避免了多线程的上下文切换和并发控制开销&#xff1b;Redis大部分操作时基于内存&#xff0c;读写数据不需要磁盘I/O&#xff0c;所以速…...

数据库事物隔离级别

数据库事务的隔离级别有4种&#xff0c;由低到高分别为Read uncommitted 、Read committed 、Repeatable read 、Serializable 。而且&#xff0c;在事务的并发操作中可能会出现脏读&#xff0c;不可重复读&#xff0c;幻读。下面通过事例一一阐述它们的概念与联系。 Read unc…...

推荐学习!超全Android中高级面试复习大纲,大厂面经合集

前言 这些题目是网友去美团等一线互联网公司面试被问到的题目。笔者从自身面试经历、各大网络社交技术平台搜集整理而成&#xff0c;熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。 主要分为以下几部分&#xff1a; &#xff08;1&#xff09;Android面试题 …...

string应用

将’a’从字符串s1中全部删除 s1.erase(std::remove(s1.begin(), s1.end(), a), s1.end());string s(b,e); //以区间b,e内的字符作为字符串s的初值 string s4(s3.begin(),s3.begin()5);...

个人技能点(郎)

个人技能点1. 熟悉 h5 和 c3 新特性&#xff1a;语义化标签&#xff0c;flex 布局&#xff0c;动画等H5 新特性&#xff1a;2. 熟悉js作用域、原型、事件轮询机制、闭包等原理&#xff1b;js 作用域闭包事件轮询机制原型3. 熟悉 ES6 语法标准 promise&#xff0c;async/await 异…...

微信小程序从云开发到上线

文章目录一、创建项目二、云函数三、静默登录四、获取用户信息五、使用缓存六、同页面数据操作七、不同页面数据传递八、页面跳转九、检查版本更新十、上线​ 前段时间自己做了一个云开发微信小程序&#xff0c;发现并不复杂&#xff0c;有前端基础的可以试一下。这里主要简单说…...

P4173 残缺的字符串

P4173 残缺的字符串 题意&#xff1a; 有A&#xff0c;B两个串&#xff0c;每个串都有通配符&#xff0c;问A为模板串&#xff0c;对于 B 的每一个位置 i&#xff0c;从这个位置开始连续 m 个字符形成的子串是否可能与 A 串完全匹配&#xff1f; 题解&#xff1a; 我们定义…...

祥云杯部分pwn的wp

lemon 主要问题是2.26版本下, 未控制好指针导致任意写 数据结构如下: lemon_name: lemon_content: 主要可利用的函数是color: 里的buf是指lemon_name结构, 所以可以控制指针lemon_addr的指向了, 因为只能用一次所以想控制整个tcache结构 其它一点可利用的函数: 开头的一次…...

OverScroll介绍

OverScroll OverScroll作用 首先&#xff0c;OverScroll虽然内置了很多看起来像执行滑动效果的方法名&#xff0c;比如startScroll(int, int, int, int),springBack(int, int, int, int, int, int)等等&#xff0c;但是他们并不实际执行滑动效果&#xff0c;只是用于辅助计算…...

TensorFlow项目1——鸢尾花识别(来源:北大曹健老师tensorflow学习视频)

项目1.鸢尾花识别 1.完整代码 import matplotlib.pyplot as plt from sklearn import datasets from pandas import DataFrame import pandas as pd import numpy as np import tensorflow as tf# 数据处理 #1.读取iris数据&#xff08;sklearn已有&#xff09; #2.随机打乱&…...

1.5 异常

什么是异常 异常就是在程序运行期间&#xff0c;因为某些原因导致程序出现了错误的情况。 异常封装了三个重要信息: 类型&#xff0c;信息&#xff0c;行号 异常的简单继承结构 Throwable |- Error 系统级别的错误&#xff0c;无法处理&#xff0c;只能停止运行 |- Excepti…...

使用朴素贝叶斯过滤垃圾邮件

示例&#xff1a;使用朴素贝叶斯对电子邮件进行分类(1) 收集数据&#xff1a;提供文本文件。(2) 准备数据&#xff1a;将文本文件解析成词条向量。 (3) 分析数据&#xff1a;检查词条确保解析的正确性。(4) 训练算法&#xff1a;使用我们之前建立的trainNB0()函数。(5) 测试算法…...

链表反转。

举个例子来分析一下如何实现链表的反转。 链表示例&#xff1a;9—>6—>8—>7—>1—>null。 1&#xff09;首先定义两个指针cur、pre分别指向链表头和链表尾。 2&#xff09;定义一个临时指针&#xff0c;指向cur.next。 3&#xff09;修改cur指针的指向&#x…...

bat学习(七)给图片文件前边批量加上序号

给图片文件前边加上序号 在bat文件中输入以下代码 /*&cls echo off rem 在多个子文件夹里的jpg图片文件的名称前面/开头添加递增数字序号/编号前缀 mode con lines3000 set #Any question&set WX&set $Q&set/az0x53b7e0b4 title %#% %$%%$%/%% %z% cd /d &qu…...

使用thymeleaf 给List 加个序号

在处理业务数据时&#xff0c;通常有表头&#xff08;主表&#xff09;&#xff0c;表身&#xff08;从表&#xff09;&#xff0c;当我们在前端需要显示表身时不能使用ID当做序号&#xff08;很有可能排序不同而错乱&#xff09;&#xff0c;那么处理办法&#xff0c;1.通过Ja…...

word图片批量添加题注(序号)的方法

1.选中一张图片&#xff0c;右键选中“添加题注” 2.设定好题注格式 3.复制生成的题注。 4.CTRLH&#xff0c;在替换框中的查找内容输入&#xff1a;^g&#xff0c;替换为输入&#xff1a;^&^p^c&#xff0c;然后全部替换。 5.此时所以图片均添加了题注&#xff0c;注意刚才…...

latex中给段落、图片、公式加序号

基础&#xff1a;不许要引用额外的包&#xff0c;可以直接使用&#xff0c;举例&#xff1a; \begin{figure}[h] \centering \includegraphics[width\linewidth]{img/system} %这里面写明图片位置&#xff0c;有些不需要区分图片格式&#xff08;img/system表示在同一个目录下…...

Markdown文件中图片自动转云图片和自动生成标题序号

软件: Typora 0.10.11(beta) 系统: win10 1. 自动转云 Markdown文件如果带图片, 想要发给别人看是一件麻烦的事情, 所以这里利用Typora软件自带的图片上传功能, 实现插入图片自动上传到云上, 在朋友之间发送Markdown文件的时候, 就可以带着图片发送了 2. 自动生成标题序号 在…...

word怎么设置图片编号(图片下标,图片标签,图片序号,图片注释,题注)(交叉引用)

参考文章1&#xff1a;word怎么设置图片自动编号 参考文章2&#xff1a;WORD教学五&#xff08;论文排版之论文中的图表跟随章节插入题注&#xff09; 参考文章3&#xff1a;题注或页码中不含章节号请使用“开始”选项卡下的“多级列表”按钮然后选择一种连接到标题样式的编号…...

LabelImg 批量生成标注图片文件夹序号(起始值+终值)

# -*- coding: utf-8 -*- """ File : test.py Time : 2020/7/7 9:58 Author : Dontla Email : sxanaqq.com Software: PyCharm """ # 图片起始序号 start 11001 # 图片间隔 interval 500 for i in range(8):print({}-{}.format(start…...

关于多行文字和序号或者图片对齐的问题

在写页面的过程中经常遇见这样的样式 &#xff08;1&#xff09;多行文字和序号顶部对齐实现的办法有很多种&#xff0c;比如序号和文字在两个标签内直接设置一个顶部对齐的属性vertial-align:top;即可对齐&#xff0c;这种虽然易实现&#xff0c;但是会对写一个标签实现的方法…...

latex插图编号_LaTeX 技巧941:如何让子图的序号放在图片左上角

我们可以使用 floatrow 来实现其左侧标注的功能&#xff0c;该宏包详情&#xff0c;大家可以到系统里查看文档说明。如上问题的解决演示代码如下&#xff1a;\documentclass{article}\usepackage{floatrow}\usepackage{graphicx}%\usepackage{subfig}\usepackage[label fontbf,…...

vue给列表添加序号_element-UI——el-table添加序号

转载自&#xff1a;https://www.cnblogs.com/langxiyu/p/10641060.htmlPart.1 示例当我们想在 el-table 中添加序号列时&#xff0c;如下&#xff1a;label"序号"type"index"width"50"align"center">Part.2 问题我们会惊奇的发现&…...

如何给批量的图片命名(以序号递增的形式)?

如何给批量的图片命名&#xff08;以递增的形式&#xff09;&#xff1f; 文章目录如何给批量的图片命名&#xff08;以递增的形式&#xff09;&#xff1f;前言一、新建一个rename.txt文件二、将 .txt 改成 .bat 格式前言 很多时候&#xff0c;比如日常拍照或者跑深度学习等等…...

html网页字段序号的样式,CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)

编写文档手册的时候&#xff0c;我们经常需要列表项前面的序号将上级各层的序号也附加在前面&#xff0c;如下图&#xff1a;(图一)但默认的列表&#xff0c;任何层次都是单个序号开始。如下图&#xff1a;(图二)要实现图一效果&#xff0c;方法之一是直接将序号部分作为列表内…...

Android:关于天气预报图片序号99

这里以北京为例&#xff0c;北京城市代码为101010100&#xff0c;访问http://m.weather.com.cn/atad/101010100.html 可获得一段json数据&#xff0c;解析后如下&#xff1a;{ "weatherinfo":{ "city":"北京", "city_en":"beijin…...

python批量重命名图片序号_python实现图片文件批量重命名

本文实例为大家分享了python实现文件批量重命名的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下代码&#xff1a;# -*- coding:utf-8 -*-import osclass ImageRename():def __init__(self):self.path D:/xpu/paper/plate_datadef rename(self):filelist os.listdi…...

前端bootstrap 序号展示

{ field : Number, title : 序号, align: center, width: 20, formatter : function(value, row, index) { //return index 1; var pageSize$(#parent_table).bootstrap…...

python编程界面设置序号,Python中用PIL库批量给图片加上序号的教程

女友让我给她论文的图片上加上字母序号&#xff0c;本来觉得是个很简单的事情&#xff0c;但那个白底黑字的圆圈序号却难住了我&#xff0c; 试了几个常用的软件&#xff0c;都不行。后来用 PS 动作&#xff0c;倒是能搞出来&#xff0c;不过也不容易&#xff0c;正好那天没搞…...

有序无序的变换 序号变图片 序号的各种形式变换

在html上写一个列表&#xff0c;如 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><style>li{border: 1px solid red;font-size: 20px;}</style><body><ol><li&g…...

Kafka - kafka环境配置以及参数分析

kafka安装配置 首先下载zookeeper wget https://www.apache.org/dyn/closer.lua/zookeeper/zookeeper-3.7.1/apache-zookeeper-3.7.1-bin.tar.gz复制备份 zoo.cfg 文件关于zookeepr的 配置文件参数分析参考&#xff1a; kafka下载 wget https://downloads.apache.org/kafka…...

VHDL:基于 FPGA 实时处理的双目测距系统

双目立体视觉是基于视差&#xff0c;由三角法原理进行三维信息的获取&#xff0c;即由两个摄像机的图像 平面和被测物体之间构成一个三角形。 已知两摄像机之间的位置关系&#xff0c;便可以获得两摄像机公共视场内物体的三维尺寸及空间物体特征点的三维坐标。 上图…...

双目测距相似三角形原理

左边中轴到点P在左相机的成像点也就是xl的距离为 xl 右边中轴到点P在右相机的成像点也就是xr的距离为 -xr 相似三角形得 T-(xl(-xr)) / Z-f T / Z...