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. flask中的static_path和static_path_url和static_folder

    static_folder表示静态文件所在路径,默认为root_dir下的static文件夹 static_url_path的行为比较复杂 如果static_folder未被指定(也就是默认值stat ...

  2. eureka注册中心集群

    注册中心集群: 思想:让一个eureka注册中心 注册到 另一个eureka注册中心上去即A注册到B,B注册到A 注册中心配置: 1:端口号不同2:应用名称相同3:相互注册

  3. JavaWeb 发送邮件

    我们可以使用第三方的邮箱服务器来发送邮件. 常用的邮件传输协议有2种:POP3/SMTP.IMAP/SMTP. POP和IMAP的区别:在邮箱客户端的操作,比如移动邮件.标记已读,如果使用POP,是不 ...

  4. 02篇ELK日志系统——升级版集群之kibana和logstash的搭建整合

    [ 前言:01篇LK日志系统已经把es集群搭建好了,接下来02篇搭建kibana和logstash,并整合完成整个ELK日志系统的初步搭建. ] 1.安装kibana 3台服务器: 192.168.2 ...

  5. 微信小程序+php 授权登陆,完整代码

    先上图        实现流程: 1.授权登陆按钮和正文信息放到了同一个页面,未授权的时候显示登陆按钮,已授权的时候隐藏登陆按钮,显示正文信息,当然也可以授权和正文分开成两个页面,在授权页面的onlo ...

  6. TCP链接异常断开后,对端仍然ESTABLISH

    双方建立TCP链接,其中一方拔掉网线,另一端依然是ESTABLISHED,那么要过多长时间才会发觉链接被断开了呢? [root@node1 ~]# sysctl -a |grep keepalive ...

  7. 交叉编译用于生成aarch64指令的GCC (9.2)

    参考 Building GCC as a cross compiler for Raspberry Pi How to Build a GCC Cross-Compiler 环境 PC: ubuntu ...

  8. C语言实现归并排序

    #include<stdio.h> #define MAXN 100 //A[p,q] A[q+1,r]是两个有序数组,想办法把他们结合成一个有序数组 void merge(int A[] ...

  9. 初学者git的用法

    初学者github的用法 1.在github上创建一个自己的工程 2.按着上面的要求执行你的命令行 3.将你的代码放到这个已经创建了.git的文件夹中,执行git add . 系统出现如下错误:war ...

  10. java、python及jmeter操作redis(接口自动化必备)

    redis是nosql数据库之一,其存储结构简单,提供高性能服务,所以在架构中是很常用的. 在做接口自动化测试过程中,有时也会涉及到redis,比如:发送短信验证码,我们做接口自动化测试,如何模拟发送 ...