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. asp.net 路由注册

    webapi的路由注册 mvc的路由注册 urlRoutingModule路由

  2. PIE 插件式开发小笔记__PIESDK学习体会

    基于PIE.NET-SDK插件式二次开发文档笔记:  PIE 插件式开发配置文件: 它里面一行如下:      理解上一行'Item'关系->    library:为插件类名(程序集名称+后缀 ...

  3. 关于django模型里面的__str__和__unicode__

    python3    django模型里面 使用 __str__  如果使用__unicode__是无效的 简而言之,就是__str__和__unicode__都是为了再管理站点中加载这个表时想显示什 ...

  4. java自适应响应式 企业网站源码 SSM 生成静态化 手机 平板 PC

    java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成ht ...

  5. Linux CentOS 6.5 ifconfig查询不到ip简单解决方法

    最近有小伙伴表示在虚拟机中安装CentOS之后使用ifconfig以及ip addr指令无法查询到ip地址, 在此笔者提供一个简单有效的方法; 1. 切换为root用户登录 su root 2.进入配 ...

  6. VUE简单的语法

    这篇主要记录了在使用过程的当中,对于vue的一些方法的理解 1.Vue生命周期中mounted和created的区别 created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视 ...

  7. 常见bug类别

  8. 2019南昌网络赛I:Yukino With Subinterval(CDQ) (树状数组套主席树)

    题意:询问区间有多少个连续的段,而且这段的颜色在[L,R]才算贡献,每段贡献是1. 有单点修改和区间查询. 思路:46min交了第一发树套树,T了. 稍加优化多交几次就过了. 不难想到,除了L这个点, ...

  9. JMeter基础【第二篇】JMeter5.1介绍及脚本录制

    测试计划:被测项目 线程组:测试场景 取样器:被测接口 添加HTTP代理服务器和线程组,默认端口是8888 排除模式可以设置过滤 启动 点击[OK] IE浏览器设置代理 IE浏览器访问百度首页,搜索“ ...

  10. 洛谷 CF997A Convert to Ones

    洛谷 CF997A Convert to Ones 洛谷传送门 题意翻译 给你一个长度为 nn 的01串( n \leq 310^5n*≤3∗105 ),你有两种操作: 1.将一个子串翻转,花费 XX ...