HTML5--Audio
一、Audio标签
Web 上的音频
直到现在,仍然不存在一项旨在网页上播放音频的标准。
今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
二、音频格式
当前,audio 元素支持三种音频格式:
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
三、使用
<audio src="test.mp3" autoplay="autoplay" controls="controls" id="audio1" loop="loop">
您的浏览器不支持音频标签
</audio>
四、<audio> 标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
| loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
| preload | preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
HTML5--Audio的更多相关文章
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- 开大你的音响,感受HTML5 Audio API带来的视听盛宴
话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...
- HTML5 Audio and Video 的新属性简介
前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...
- HTML5 Audio and JavaScript Control
IE8 以下无效 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=u ...
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- Html5 audio stop
//html5 stop audio play function stopPlay(el){ el.pause(); el.currentTime = 0; } 使用: var el = docume ...
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
- Using HTML5 audio and video
From:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video Using HTML5 ...
随机推荐
- ubuntu remove mysql
ubuntu 彻底删除 mysql 然后重装 mysql 删除 mysql sudo apt-get autoremove --purge mysql-server-5.0sudo apt-get r ...
- WCF学习之二
今天在照着网上教程做练习的时候,用IE浏览器运行的时候遇到了一些问题 “找不到类型“WCFService.Service1”,它在 ServiceHost 指令中提供为 Service 特性值,或在配 ...
- 详解MemCached原理
memcached是一个高性能的分布式内存缓存服务器,memcached在Linux上可以通过yum命令安装,这样方便很多,在生产环境下建议用Linux系统,memcached使用libevent这个 ...
- Direct3D11学习:(零)常见问题及解决方法整理
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 在D3D11学习的这个系列中,单独写一篇文章来记录自己学习过程中遇到的问题及最后的解决方法. 这篇文章的目的 ...
- 【Git使用】强制推送代码到多个远程仓库
只吃了一个香蕉的晚上 一直预报的台风没有来,大盘也飘红了,世界好像变得越来越美好了似的.前两天,晚上下班坐地铁回家,靠在地铁门上看书,竟然坐到了终点站已全然不知,我也不知道我怎么了.怎么了.怎么了!最 ...
- UWP开发入门(十六)——常见的内存泄漏的原因
本篇借鉴了同事翔哥的劳动成果,在巨人的肩膀上把稿子又念了一遍. 内存泄漏的概念我这里就不说了,之前<UWP开发入门(十三)——用Diagnostic Tool检查内存泄漏>中提到过,即使有 ...
- 虚拟机service network restart没有反应解决方法
一般我们新copy的虚拟机或新克隆的虚拟机第一次启动时都会出现没有ip地址的情况: [root@zejin243 network-scripts]# ifconfig lo Link ...
- 2016校招内推 -- 腾讯SNG前端 -- 面试经历
也是让某湿兄帮忙内推,然后过了四五天,电话打来了 一面: 1.首先是简单的自我介绍 2.你觉得一个前端工程师应该具备什么技能 比如用户体验这个方面他就贵问你具体的例子 3.让你设计一个web站点,假如 ...
- Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室
一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...
- AC自动机 - 多模式串的匹配 --- HDU 3695 Computer Virus on Planet Pandora
Problem's Link Mean: 有n个模式串和一篇文章,统计有多少模式串在文章中出现(正反统计两次). analyse: 好久没写AC自动机了,回顾一下AC自动机的知识. 本题在构造文章的时 ...