【前端标签-audio】网页播放一个音频和多个音频

标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放.如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

1.播放一个音频
在idea中建一个文件夹存放本地.MP3文件

body中输入:

<audio controls><source src="/audio/The%20truth%20that%20you%20leave.mp3">
</audio>

运行在浏览器显示,即可播放

2.播放多个音频
第1在网页中只能播放一个音频,若想播放按顺序播放多个音频:

<div id="audioBox"><script type="text/javascript">window.onload = function(){var arr = ["http://96.ierge.cn/12/181/363120.mp3","http://96.ierge.cn/12/185/370503.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 = falsefunction playEndedHandler(){myAudio.src = arr.pop();myAudio.play();console.log(arr.length);!arr.length && myAudio.removeEventListener('ended',playEndedHandler,false)}}</script>
</div>

播放玩一首歌曲后自动播放下一首,到放完为止

【前端标签-audio】网页播放一个音频和多个音频相关推荐

HTML5音频标签audio无法播放的问题
HTML5音频标签无法播放的问题先说下audio标签的一些属性属性值描述 autoplay autoplay 如果出现该属性,则音频在就绪后马上播放. controls controls 如果 ...
html5 audio样式修改,html5audio美化 html5 audio 顺序播放
如何修改HTML5 audio 的样式写的时候不要用controls, 然后自己写div或者a标签,定义样式. 再用js捕获audio事件就可以了. 基本就是src pause暂停 load加载 p ...
最简单的基于Flash的流媒体示例网页播放器（HTTP，RTMP，HLS）
===================================================== Flash流媒体文章列表: 最简单的基于Flash的流媒体示例:RTMP推送和接收(Acti ...
最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）
音视频领域,再次搜索,依然是大神雷霄骅的杰作.再次致敬,一路走好. ===================================================== Flash流媒体文章列表 ...
微信网页audio标签无法正常播放音频
先简单说一下笔者遇到的情况,方便其他人员确认是否符合自身需要,项目需要做一个微信公众号活动,要求用户上传音频,然后为了减少播放器的麻烦,音频文件需要通过另外的转码服务器转成统一的mp3文件,然后再回传 ...
JS纯前端实现audio音频剪裁剪切复制播放与上传
背景是这样的,用户上传音频文件,可能只需要几十秒就够了,但是常规的音乐都要3~5分钟,80%的流量都是不需要的,要是就这么传上去,其实是流量的浪费,如果可以在前端就进行剪裁,也就是只取前面一段时间的音 ...
html中加入音乐播放器,HTML网页添加音乐播放器做背景音乐代码-标签audio
是 HTML 5 的一个新标签,定义声音,比如音乐或其他音频流. 调用格式: src="http://sc1.111ttt.com/2016/1/02/04/195040016323.mp3 ...
java amr音频转码_jave: 音频转码工具，主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放...
音频转码工具本工具主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放. 支持 Linux/Windows/Mac 平台因为是基于 JAVE 项目 ...
利用html5标签audio在不同客户端下适配播放音频
//声明:ios系统不支持falsh,故而采用各平台支持的html5 audio标签 <script> //创建audio标签 var audio = document.createEle ...

【前端标签-audio】网页播放一个音频和多个音频

【前端标签-audio】网页播放一个音频和多个音频相关推荐

最新文章

热门文章