如何在网页中应用HTML 5音频

开发 前端
世界上公认的第一个网页是诞生于1992年,发展至今,网页已经有21年历史了。在这21年里面,网页开发的标准从没有完全统一过。而我们经常见到的web音频就是这么样子的。现在,大部分的网页音频播放依靠着flash,但是显然地,flash已经越来越不适用于web开发。所以呢,苹果放弃了flash,而Android也宣布不再支持flash。主要原因就是HTML5的诞生,为web开发提供了更加便捷、高效的音频应用。那么,在网页中HTML5音频或者说HTML5播放器是怎么应用的呢。

HTML5 audio

在HTML5标准网页里面,我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式:

1.最少的代码

  1. <audio src="song.ogg" controls="controls"></audio>   

2.带有不兼容提醒的代码

  1. <audio src="song.ogg" controls="controls">   
  2. Your browser does not support the audio tag.    
  3. </audio>   

3.尽量兼容浏览器的写法

  1. <audio controls="controls">   
  2.   <source src="song.ogg" type="audio/ogg">   
  3.   <source src="song.mp3" type="audio/mpeg">   
  4. Your browser does not support the audio tag.    
  5. </audio>  

HTML5音频格式

当前,HTML***udio标签支持三种格式的音频,分别是wav mp3和ogg格式。而目前主流浏览器对他们的支持如下:

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

IE8以及IE8以下不支持HTML5的audio标签

HTML ***udio属性

1.autoplay:***可选值为autoplay,出现autoplay属性并准确赋值时,音频将会自动播放

2.controls:***可选值为controls,出现controls属性并准确赋值时,音频播放控件将会显示,控件包括:播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)。

3.loop:***可选值为loop,出现loop属性并准确赋值时,音频将会循环播放。

4.preload:可选值有auto(当页面加载后载入整个音频)、meta(当页面加载后只载入元数据)和none(当页面加载后不载入音频) 如果设置了前面的autoplay属性,那么preload将会被忽略。

5.src:指定音频URL地址,可以是相对的URL也可以是绝对的URL 当然还可以像第2和第3个例子一样,用source标签来指定源。

原文链接:http://www.itluren.com/apply-html5-audio-to-web.html

【编辑推荐】

  1. 8个效果惊人的WebGL/JS演示
  2. WebGL: 为浏览器提供3D显示支持
  3. JavaScript,只有你想不到
  4. 如何优化你的JS代码
  5. 另一款有意思的JS图片放大镜

 

 

责任编辑:彭凡 来源: IT路人
相关推荐

2022-12-25 17:49:55

Ubuntu媒体音频Linux

2012-04-27 14:34:15

2017-08-09 15:57:11

JavaScriptHtml5音频

2012-01-11 16:00:50

HTMLOperaAPP

2014-06-26 16:05:53

2009-07-02 15:01:07

HTML 5

2012-12-07 10:20:56

IBMdW

2013-08-07 14:48:00

HTML5

2012-05-10 09:45:14

HTML5

2012-05-09 09:41:58

HTML5

2023-08-15 15:15:24

2010-07-27 09:44:16

HTML 5

2009-07-06 00:01:51

HTML 5元素

2022-08-03 10:45:04

人工智能网络安全

2011-06-02 17:21:52

网站优化关键词

2012-05-24 15:49:35

HTML5

2012-12-10 09:49:28

2022-03-02 09:11:09

机器学习网络

2022-07-15 09:01:15

React对象编程

2020-03-31 21:50:41

JavaScript前端技术
点赞
收藏

51CTO技术栈公众号