html 多个mp3,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流。用的比较多音频格式是.mp3。
标签常用属性如下表
属性
值
描述
autoplay
autoplay
添加该属性后,音频会自动播放
controls
controls
设置后,显示控件,如播放按钮、音量
loop
loop
添加该属性后,当音频播放结束后会重新开始播放
preload
preload
音频显示页面加载,准备播放,如已添加autoplay,则忽略该属性
src
url
播放音频的URL(地址)。
HTML5音频简单的使用实例如下
但有时候你的浏览器不支持.MP3格式播放,这时就需要设置兼容多个浏览器的格式了,如下
很多小白把上面理解为音频播放列表,按顺序播放(即播放完music.mp3后,自动播放下一个music.m4a)。html5设成多个src,主要是有的浏览器无法播放个别音频格式,它从上到下读取播放,如果第一个mp3格式能播放,后面的就没用了。
以前给网页、网站添加音乐播放列表时,都是用网易音乐、虾米音乐中的“生成外链播放器”来给网页添加音乐的,但过一段时间,你会发现你添加的音乐列表某首音乐不能播放了,主要原因是音乐版权问题。这时只能通过添加其他播放器或自己用代码来实现了。推荐阅读:网页如何嵌入腾讯/优酷视频播放器
目前,html5标签只能同时播放一个音频文件,如何要添加多个MP3音频文件,然后按顺序一个接着一个连续播放,需要用JS代码来实现。
通过js来实现标签连续播放多个MP3音频,代码如下:
window.onload = function(){
var arr = ["http://www.lmlblog.com/blog/bozhao/images/believe.mp3","http://www.lmlblog.com/blog/bozhao/images/shui.mp3"]; //把需要播放的歌曲从后往前排,这里已添加两首音乐,可继续添加多个音乐
var myAudio = new Audio();
myAudio.preload = true;
myAudio.controls = true;
myAudio.src = arr.pop(); //每次读数组最后一个元素
myAudio.addEventListener(‘ended‘, playEndedHandler, false);
myAudio.play();
document.getElementById("audioBox").appendChild(myAudio);
myAudio.loop = false;//禁止循环,否则无法触发ended事件
function playEndedHandler(){
myAudio.src = arr.pop();
myAudio.play();
console.log(arr.length);
!arr.length && myAudio.removeEventListener(‘ended‘,playEndedHandler,false);//只有一个元素时解除绑定
}
}
将上面代码的音频地址改成你的MP3地址即可,可在后面添加多个mp3音频地址。
以上代码效果显示地址:http://www.lmlblog.com/blog/bozhao/ 网站添加播放器的方法除了上面说到的网易云生成外链播放器、虾米播放器(制作地址http://www.xiami.com/widget/imulti)添加,还有很多,欢迎交流。
html 多个mp3,HTML5 audio 如何实现播放多个MP3音频相关推荐
- html5播放多个mp3,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表 属性 值 描述 autoplay autoplay 添加该属性后,音频会 ...
- html5自动播放音乐外链,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表 属性 值 描述 autoplay autoplay 添加该属性后,音频会 ...
- HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. audio 标签属性 <audio src="song.mp3" contr ...
- html5 audio 获取播放时间,html5 audio 延时获取播放路径播放失败
为什么audio对象在延时1000毫秒之后就不能执行播放呢? 歌曲的路径需要从数据库中获取,所以需要用ajax来交互,但是发现假如时间过长即使获取到路径也不能执行播放. 为方便测试使用setTimeo ...
- html5录制mp3,html5 录制mp3音频,支持采样率和比特率设置
13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢.不得不说,前端技术发展真是日新月异,有人实 ...
- html如何播放多个mp3,HTML5_audio_如何实现播放多个MP3音频
<不的期是范添事大部会基近说小间进围砖本的;audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式支器事的后功发久这含层请间业在屏 ...
- HTML5 audio 标签 播放事件流程
此代码包括了html5 audio 标签 整个播放流程. 你可以暂停,调整音量,拖动进度条 观察一下 var audio = new Audio(); document.body.appendChi ...
- HTML5 如何实现播放多个MP3音频
方法一:audio标签 <audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下 ...
最新文章
- GitHub换帅!开源大神辞任CEO,竞品GitLab刚完成IPO
- 阿里云ECS主机自定义进程监控
- ASP.NET 父页面取子页面的值
- Tool:微信使用技巧之手把手教你如何在电脑端同时登录多个微信账号之图文教程详细攻略
- springmvc 全局编码_SpringMVC-设置UTF-8编码
- 订单不断,我是这样做的
- SPOJ MYQ10 (数位DP)
- @autowired注解注入为null_Intellij IDEA中Mybatis Mapper自动注入警告的6种解决方案
- ***jquery选择器 之 获取父级元素、同级元素、子元素
- struts中获取多选按钮html:checkbox的值
- vscode格式化 java_VS CODE中配置JAVA格式化细节
- Visual C++ 2011-5-18
- 主题模型TopicModel:LDA编程实现
- Atitit 给投资人的回报 目录 1.1. 经济回报(略)	1 2. 精神文化与学术回报	1 2.1. 提升自我 投资人可以在我们的教育体系提升自我学术水平	1 2.2. 对自己感兴趣的学术领
- JAVA NIO 实现群聊
- TeleportUltra_1.65_PortableSoft离线浏览利器-扒网页神器
- DiskGenius系统迁移(更换硬盘系统对拷)
- iTunes 10 选择自定义IPSW
- 2022-05-02 Unity核心4——SpriteShape
- 使用cryptsetup加密硬盘
热门文章
- sql server高可用_SQL Server 2019常规可用性和安装概述
- 让您的数据库服务器与您对话:直接从SQL Agent Jobs发送电子邮件
- olap 多维分析_如何通过依赖T-SQL从OLAP多维数据集有效地提取数据
- PHP全栈学习笔记3
- Java微信公众号开发梳理
- 表单中的日期 字符串和Javabean中的日期类型的属性自动转换
- 【bzoj1604】[Usaco2008 Open]Cow Neighborhoods 奶牛的邻居 旋转坐标系+并查集+Treap/STL-set...
- Orchard源码分析(5.3):EndRequest事件处理(DefaultOrchardHost.EndRequest方法)
- UILabel---.tff格式字体
- 谈谈java中成员变量与成员方法继承的问题