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 ...
随机推荐
- APS.NET MVC + EF (14)---项目框架搭建
一:框架搭建 1:先创建Model. 2:创建数据访问接口层.IUserInfoDal 在该接口中定义了常见的方法CURD以及分页方法. public interface IUserInfoD ...
- vue中路由在新的标签页打开
如下 let routeData = this.$router.resolve({ name: 'commercialPreview', query: {cylType: this.$route.qu ...
- 浅聊几种主流Docker网络的实现原理
原文:https://mp.weixin.qq.com/s/Jdxct8qHrBUtkUq-hnxSRw 参考:https://blog.csdn.net/yarntime/article/detai ...
- 恭喜你!看到这6个MES系统选型的大坑,千万要避免!
随着工业4.0概念的出现,智能化生产成为了各大制造业的发展趋势! MES系统可以为企业提供包括制造数据管理.计划排程管理.生产调度管理.库存管理.质量管理.人力资源管理.工作中心/设备管理.工具工装管 ...
- android studio学习----如何创建一个库项目
首先,打开Android studio的软件工具,进入到界面中点击菜单的“file”选项. 2 在弹出的下拉的菜单中,可以看到的是为"New Module“的选项点击进入. 3 进入到c ...
- 锁、分布式锁、无锁实战全局性ID
1.为什么要使用锁 当发生并发时,会产生多线程争夺一个资源,为保证资源的唯一性. JVM锁:对象锁,死锁,重入锁,公平锁,偏向锁 分布式锁:数据库 nosql .zookeeper 面试题:如何排查死 ...
- JavaScript的Proxy可以做哪些有意思的事儿
摘要: 神奇而有趣的Proxy. 原文:拿Proxy可以做哪些有意思的事儿 作者:贾顺名 Fundebug经授权转载,版权归原作者所有. Proxy是什么 首先,我们要清楚,Proxy是什么意思,这个 ...
- Semaphore的简介及应用场景
Semaphore是一个计数信号量,常用于限制可以访问某些资源(物理或逻辑的)线程数目. 常用函数: 信号量的构造函数 非公平: public Semaphore(int permits);//per ...
- shell $x的含义
linux中shell变量$#,$@,$0,$1,$2的含义解释: 变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行 ...
- K8S当中的本地卷(Local PV)的使用
Local PV是从kuberntes 1.10开始引入,本质目的是为了解决hostPath的缺陷.通过PV控制器与Scheduler的结合,会对local PV做针对性的逻辑处理,从而,让Pod在多 ...