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标签切换播放音乐的方法的更多相关文章

  1. ios vue2.0使用html5中的audio标签不能播放音乐

    我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...

  2. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  3. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  4. HTML5 Audio时代的MIDI音乐文件播放

    大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持,因为mid文 ...

  5. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  6. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  7. HTML5 audio 如何实现播放多个MP3音频

    <audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...

  8. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  9. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

随机推荐

  1. 微服务架构 ------ 插曲 linux LVM磁盘扩容

    1.LVM的基本概念 物理卷(PV):可以在上面建立卷组的媒介,可以是硬盘分区,也可以是硬盘本身或者回环文件,物理卷包括一个特殊的header,其余部分被切割成一块块物理区域. 卷组(VG):将一组物 ...

  2. sqlserver 远程链接

    远程链接的文档就不说了,网上好多. 这里就说下我遇到的情况,如果是阿里云的服务器的话,他的端口配置都是要到阿里云里的安全组里去配置的,第一次一直没想到,搞了一天才发现,在这里提醒各位好友.

  3. Cobaltstrike安装

    1.下载JDK http://www.oracle.com/technetwork/java/javase/downloads/java-archive-javase8-2177648.html#jd ...

  4. redis不能保存bean对象

    可用JSON转为json格式 // 2.3 将用户信息存储在redis中 String memberToJson = JSON.toJSON(member).toString(); 需要maven坐标 ...

  5. elastic date时区问题解决办法

    之前介绍filter date插件时就谈到时区问题,但是没有说明白.最近在使用range查询时间范围内的数据时出现了数据量不一致的情况.特地了解了下ELK Stack中关于时区的问题. 问题: 使用k ...

  6. 第一部分day1-变量、运算

    变量:为了存储程序运算过程中的一些中间 结果,为了方便日后调用常量:固定不变的量,字符大写 变量的命名规则 1.字母数字下划线组成2.不能以数字开头,不能含特殊字符和空格3.不能以保留字命名4.不能以 ...

  7. Nginx Rewrite相关功能-防盗链

    Nginx Rewrite相关功能-防盗链 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  8. ThinkPHP5框架引入的css等外部资源文件没有生效

    静态资源文件一般是放在public目录里,不只是css,只要是静态资源文件都没有显示出来. (更好的阅读体验可访问 这里 ) 问题陈述 文件结构 文件内容 三个文件分别为:Index.php.test ...

  9. 等了半年的AMD锐龙3000系列台式机处理器今天终于上市开卖了!

    第三代AMD锐龙台式机处理器参数:

  10. 1. 观察者模式总结(C++)

    1. 介绍 观察者模式:定义了一种"一对多"的依赖关系,让多个观察者对象同时监听一个对象的改变,即当该对象的状态发现改变时,会通知所有它依赖的观察者对象.观察者模式属于行为模式. ...