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 MVC自定义Module记录管道事件执行顺序

    1. 在Visual Studio 新建项目,模板为空,下面结构选择MVC. 2. 在项目中新建一个类MyModule,实现IHttpModule接口 namespace SimpleApp.Infr ...

  2. 阿里云监控RDS

    RDS性能监控API https://help.aliyun.com/document_detail/26280.html?spm=a2c4g.11186623.6.1576.341d7159uzLD ...

  3. 如何提升Web前端性能?

    什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情.我们来看看用户访问网站,浏览器都做了哪些事情:输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 ...

  4. [Vscode插件] 自动编译项目中的Sass文件为CSS

    插件名 : Live Sass Compiler 今天在VSCode中发现了一个自动watch项目目录下sass文件的插件,摆脱了在控制台中进行手动watch的繁琐. 安装好以后点击右下角即可自动编译 ...

  5. C# DataTable 转实体对象

    DataTable 转实体对象 /// <summary> /// DataTable通过反射获取单个对象 /// </summary> public static T ToS ...

  6. Spark GraphX图算法应用【分区策略、PageRank、ConnectedComponents,TriangleCount】

    一.分区策略 GraphX采用顶点分割的方式进行分布式图分区.GraphX不会沿着边划分图形,而是沿着顶点划分图形,这可以减少通信和存储的开销.从逻辑上讲,这对应于为机器分配边并允许顶点跨越多台机器. ...

  7. TRACE32 Simulator License

    链接:https://www.lauterbach.com/frames.html?sim_license.html Which Features of the TRACE32 Instruction ...

  8. 国内加速访问 GitHub

    国内加速访问 GitHub 本文原始地址:https://sitoi.cn/posts/23395.html 中国访问 GitHub 的速度不忍直视,那就叫一个慢! Q: 为什么访问速度会很慢? A: ...

  9. 接口自动化--数据驱动(ddt)

    上次我们提到了unittest单元测试框架,运用单元测试框架unittest进行编写测试用例 但是遇到了一个问题,就是难道我一个测试点中有多个测试用例,我要每一个都要去编写一条测试用例嘛?这实在是太复 ...

  10. dapi 基于Django的轻量级测试平台四 任务设置

    QQ群: GitHub:https://github.com/yjlch1016/dapi 一.间隔时间: 二.定时时间: 三.任务设置: 四.任务结果: