【H5笔记】HTML5autio元素使用
来源:互联网 发布:mysql中decode函数 编辑:程序博客网 时间:2024/06/11 22:18
今日尝试在网页中加入音频文件,实现在页面加载时播放,并且可以通过select选择播放模式,经测试,在常用浏览器下均可以顺利使用,mark一下,方便以后为网页插入背景音乐
demo
<body>
<h2>music player</h2>
<select id="typeSel">
<option value = "sequence">顺序播放</option>
<option value = "random">随机播放</option>
</select>
<audio id="player" controls>
您的浏览器不支持audio元素
</audio>
</body>
JavaScript控制播放,给音乐播放结束加一个监听器,可以根据选择决定播放顺序
<script type="text/javascript">
var musics=[
"a.ogg",
"b.ogg",
"c.ogg",
"d.ogg",
"e.ogg",
];
var index = 0;
var playType;
var player;
window.onload = function(){
var typeSel = document.getElementById("typeSel");
typeSel.onchange = function(){
window.playType = typeSel.value;
}
player = document.getElementById("player");
player.src = musics[index];
player.onended = function(){
if(playType == "random"){
index = Math.floor(Math.random()*musics.length);
player.src = musics[index];
}else{
player.src = musics[++index % musics.length];
}
player.play();
}
}
</script>
附上Firefox效果图
顺带说一下音频文件格式问题,支持audio最适合的为.ogg,测试效果音质不错,粘上度娘的解释
Ogg全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式,类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是".ogg"。Ogg文件格式可以不断地进行大小和音质的改良,而不影响旧有的编码器或播放器。
- 【H5笔记】HTML5autio元素使用
- 疯狂H5讲义笔记 - H5常用元素和属性
- H5新标签元素学习笔记
- H5学习笔记之元素分类
- appium使用H5怎么定位元素
- H5页面开发,元素使用心得技巧
- H5学习笔记之表格元素、文档元素
- 【H5笔记】可以省略结束标签的元素
- H5学习笔记之a标签、分组元素
- 疯狂H5讲义笔记 - 表单相关元素和属性
- h5学习笔记:weui text/template 使用
- h5笔记
- H5表单元素详解
- H5中的canvas元素
- H5元素以及属性
- H5元素周期表
- H5新增表单元素
- h5元素嵌套问题
- 近世代数【第一章 群】2 子群
- leetcode:Binary Tree Inorder Traversal
- 数据结构之将两个递增的有序链表合并为一个递增的有序链表
- 【Android开发】范例2-实现带图标的ListView
- iOS开发拓展篇-XMPP简单介绍
- 【H5笔记】HTML5autio元素使用
- PhpExcel中文帮助手册|PhpExcel使用方法
- 如何实现android手机摄像头的的自动对焦
- 分布式系列 - dubbo服务telnet命令
- 抛硬币问题
- IRQL与内存分页
- public、private、protected/抽象类和接口/final、static、clone
- 大学的计算机专业课到底该怎么上?
- TC 出现的一个登陆问题的处理