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 ...
随机推荐
- 《EOPL》 : 实现了 call/cc
待填坑 完整代码:scheme-code/EOPL/ch5/4-LETREC (CPS)-Exception-扩展/exer-5.43__★callcc/
- PAT 1026程序运行时间
PAT 1026程序运行时间 要获得一个 C 语言程序的运行时间,常用的方法是调用头文件 time.h,其中提供了 clock() 函数,可以捕捉从程序开始运行到 clock() 被调用时所耗费的时间 ...
- 响应式开发 纯CSS实现隐藏菜单栏
// 将要隐藏的菜单设置 display: block; // 然后在菜单上面设置一个点击选项,如“菜单”<label for="toggle-checkbox" id=&q ...
- Git恢复删除的分支
1.使用 git reflog 命令查看显示整个本地仓储的commit,包括所有branch的commit,甚至包括已经撤销的commit. 2.找到我们想要恢复的分支 ,可以看到我们当时commit ...
- iOS相关
1. fastlane a collection of tools that help you automate building and releasing iOS and Android apps ...
- FPM八:FPM TREE
先上效果图: 1,新建类:ZCL_FPM_TREE,并添加接口:IF_FPM_GUIBB,IF_FPM_GUIBB_TREE.激活所有方法 2.定义tree结构,在class的public secti ...
- CDA数据分析【数据处理工具SPSS】
一.概述 SPSS[Statistical Package for the Social Science]社会科学统计软件包.SPSS统计软件在社会学.经济学.心理学.教育学等多个学科的研究工作和通信 ...
- php-fpm编译安装脚本
PHP是开源.轻量级.高效的开发语言,特别适合web项目开发,在中小型互联网公司中常用于开发web后端.PHP常与Nginx及MySQL数据库结合,搭建LNMP环境.以下为centos7系统下ph ...
- 树莓派初入门(1):SSH远程登录与VNC远程桌面
前言: 本文主要讲解,对于一个无树莓派显示屏,无键盘,无鼠标,手边只有手机,电脑和一个已烧录好raspbian-stretch系统的树莓派3B+的玩家,如何进行远程登录,进而可以进程桌面的连接. 工具 ...
- vuex的简单总结使用
State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store对象,后期就可以使用this.$store.state直接获取状态 辅助函数的使用 1.mapState state的m ...