如何在网页中应用HTML5音频

  HTML5 audio

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

  1.最少的代码

  <audiosrc="song.ogg"controls="controls"></audio>

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

  <audiosrc="song.ogg"controls="controls">  Yourbrowserdoesnotsupporttheaudiotag.  </audio>

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

  <audiocontrols="controls">  <sourcesrc="song.ogg"type="audio/ogg">  <sourcesrc="song.mp3"type="audio/mpeg">  Yourbrowserdoesnotsupporttheaudiotag.  </audio>

  HTML5音频格式

  当前,HTML5 Audio标签支持三种格式的音频,分别是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 5 Audio属性

  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标签来指定源。

  【编辑推荐】

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

成功是什么?就是走过了所有通向失败的路,

如何在网页中应用HTML5音频

相关文章:

你感兴趣的文章:

标签云: