html5 audio标签切换播放音乐的方法
html5 audio标签切换播放音乐的方法
<pre>
<audio id="music1" preload loop="loop"></audio>
<div style="width:720px; height:60px;" luyinpath="/weiqingshu/music/music.mp3" class="ceshiqiehuan">测试1</div>
<div style="width:720px; height:60px;" luyinpath="/dongjun12/music/music.mp3" class="ceshiqiehuan">测试2</div>
<div style="width:720px; height:60px;" luyinpath="/kelaweiloushu/music/music.mp3" class="ceshiqiehuan">测试3</div>
<div style="width:720px; height:60px;" luyinpath="/lingjuli/music/music.mp3" class="ceshiqiehuan">测试4</div>
</pre>
<pre>
$('.ceshiqiehuan').each(function () {
$(this).on('touchstart', function () {
$('#music1')[0].pause();
var luyinpath = $(this).attr('luyinpath');
$('#music1').attr('src', luyinpath);
$('#music1')[0].play();
})
})
</pre>
总结
先pause关闭 然后更换路径 然后play播放
html5 audio标签切换播放音乐的方法的更多相关文章
- ios vue2.0使用html5中的audio标签不能播放音乐
我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...
- HTML5 Audio时代的MIDI音乐文件播放
大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持,因为mid文 ...
- CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件
CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...
- ios加载html5 audio标签用js无法自动播放
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...
- HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
随机推荐
- 使用xdebug对php做性能分析调优
作为PHP程序员我们或多或少都了解或使用过xdebug.此文章记录安装和配置xdebug,以及如何使用它来分析php程序. 我的机器环境: mac, php 安装 xdebug 推荐使用 pecl 安 ...
- python--进程初识详解
进程:通俗理解一个运行的程序或者软件,进程是操作系统资源分配的基本单位 1.1.导入进程模块 import multiprocessing 1.2.Process进程类的语法结构如下: Process ...
- Mybatis映射文件标签(关于sql)
Mybatis映射文件 1.接口的全限定名和映射文件的namespace一致 <mapper namespace="com.offcn.dao.UserDao"> 2. ...
- bundler-sfm windows下编译过程中出现的错误
一.“sysdep1.h”文件缺失 错误提示: fatal error C1083: 无法打开包括文件: “sysdep1.h”: No such file or directory 这些作为这个软件 ...
- EHLIB 安装方法
Ehlib安装方法 路人甲 2010-05-05 23:01:37 安装文件自带的Readme.txt中的安装过程如下: 1. Delphi 5.x - 7.x, Delphi 9.X Win32, ...
- QGraphicsItem鼠标精准拾取(pick/select)研究
在QT场景视图中,一个2D图形项是一个QGraphicsItem,我们可以通过继承来定义我们自己的图形项. 主要有以下三个虚函数需要重点关注: 1) 边界矩形(必须实现) virtual QRec ...
- 你家的APS系统有这些功能吗?排程系统功能盘点
随着企业规模不断扩大,在经营管理方面会面临各种各样的问题,为了帮助解决此类问题,很多公司都会引入APS高级排程系统帮助进行生产管理的优化. APS系统针对的管理目标是 改善库存控制,大幅降低原料与中间 ...
- Django使用Mysql已存在数据表的方法
在mysql数据库中已经存在有数据的表,自己又不想删除,下面方法可以同步django中创建的表 1.最好将自己建的表名改为前缀和django自动创建表名前缀相同,不改也可以,但是后期表太多容易混乱 2 ...
- Docker搭建Wordpress
搭建 wordpress 1.拉取 wordpress 镜像docker pull wordpress:latest 2.运行 wordpress 镜像 docker run --name wordp ...
- 《linux就该这么学》课堂笔记16 bind域名解析
1.DNS域名解析服务 DNS(Domain Name System,域名系统)是一项用于管理和解析域名与IP地址对应关系的技术,就是能够接受用户输入的域名或IP地址,然后自动查找与之匹配(或者说具有 ...