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 ...
随机推荐
- 活动任务出现bug
之前做的一个活动任务发现一个bug,是以前和离职同事一起对逻辑的时候没有考虑到的,配置活动的时候应该要先查询下,如果这个产品线上在这段时间已经配置了并且上线了,则不能在做活动处理了,否则就和前面的活动 ...
- 将Redis设置为后台启动
Linux 在执行redis-server /etc/redis.conf 时默认开启的是一个前台的进程,也就是说启动的redis 就做不了其他的操作了,只有关闭redis 才能做其他的操作.非常的 ...
- 【转载】C#里怎么把string类型转换成double
在C#的数字计算过程中,有很多的方法可以将字符串String类型的变量转换为double类型,double.Parse方法.Convert.ToDouble方法.double.TryParse方法等都 ...
- C# 实体对象作为参数统一去除空格
/** * ------------------------------------------------------------------------------ * @Copyright in ...
- APS的未来会怎么样?历史给了你答案
一项技术从概念推广到实际应用推广需要十五到二十年时间,21世纪的头十年是APS的概念推广时期,随着理论的成熟,软件的实用化,企业应用的深入,下一个十年,APS将是实际应用推广的时期. APS兴起 从上 ...
- Linux发展史与安装-Linux从入门到精通第一天(非原创)
文章大纲 一.Linux发展史二.Linux系统的安装三.Linux系统的文件四.学习资料下载五.参考文章 一.Linux发展史 1. Linux前身-Unix 1968年 Multics项目MI ...
- 查看LINUX系统的配置
# uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostn ...
- OSI、TCP/IP
计算机网络分层的目的:支持异构网络系统的互联互通 7层OSI参考模型是法定标准(国际标准化组织ISO提出) 4层TCP/IP参考模型是事实标准 OSI参考模型 应用层.表示层.会话层.传输层.网络层. ...
- Kth Minimum Clique(2019年牛客多校第二场D题+k小团+bitset)
目录 题目链接 题意 思路 代码 题目链接 传送门 题意 找第\(k\)小团. 思路 用\(bitset\)来标记每个结点与哪些结点直接有边,然后进行\(bfs\),在判断新加入的点与现在有的点是否都 ...
- wordpress调用自定义post_type文章
前面我们讲了wordpress添加post_type自定义文章类型,我们现在来讲一下如何把自定义文章调用出来,我们以product为例,虽然我们自定义好了 Post Type 同时也编写了一些内容,但 ...