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 ...
随机推荐
- 2019 浩德钢圈java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.浩德钢圈等公司offer,岗位是Java后端开发,因为发展原因最终选择去了浩德钢圈,入职一年时间了,也成为了面 ...
- 基于vue+springboot+docker网站搭建【七】制作后端spring-boot的docker镜像部署
制作spring-boot的docker镜像并部署 一.下载后端项目:https://github.com/macrozheng/mall 二.修改mall-admin项目的配置文件 修改applic ...
- 一、VUE基础回顾1
1.v-if和v-show v-if 和v-show都可以显示和隐藏元素: 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制 ...
- android studio学习---Lint工具
对代码进行测试是一回事,但同样重要的是.我们还需要在编写代码的同时引入各种最佳实践.这不仅能够显著改进性能表现,也能增加应用程序的整体稳定性.另外,经过合理结构调整的项目在维护方面也更为轻松. And ...
- 【转载】Gradle学习 第八章:依赖管理基础
转载地址:http://ask.android-studio.org/?/article/10 This chapter introduces some of the basics of depend ...
- svn忽略target文件
背景:最近项目转移到svn上 发现:项目从svn拉取下来到eclipse中,发现有大量的文件改动,一看都是一些.project之类的配置文件或者是target文件夹,或者下面的文件 这些东西肯定是不需 ...
- EtherNet/IP CIP协议
EtherNet/IP CIP协议 1.EtherNet/IP简述 EtherNet/IP(Ethernet/Indstrial Protocol,以太网/工业协议)是一种基于以太网和TCP/IP技术 ...
- ansible自动化运维02
ansible清单管理 inventory文件通常用于定义要管理主机的认证信息,例如:ssh登录用户名,密码,以及key相关信息. 举个例子:定义清单组 注意:组名为pro,关键字段children表 ...
- helm搭建本地chart仓库及基本操作
这个步骤,是配合公司的竞赛. 因为公司这次的环境,我们只有namespace权限,而没有整个集群的管理, 而且,公司没有提供统一的helm chart repo, 所以只能自建. 参考URL: htt ...
- github1:workq
https://github.com/taf2/workq https://github.com/erez-strauss/lockfree_mpmc_queue 多生产者 多消费者 队列 < ...