插入音频可以使用<object>或者<embed>标签,也可以使用<audio>标签。
使用 <embed> 元素(HTML5标签)
<embed height="100" width="100" src="song.mp3" />
使用 <object> 元素
<object height="100" width="100" data="song.mp3"></object>
使用 HTML5 <audio> 元素(HTML5标签)
<audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio format.(这句话正常是不显示的) </audio>
<audio> 元素
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
最好的 HTML 解决方法
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>上面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败, 代码将回退尝试
<embed> 元素。
以下是我自己做的测试:
mp3 | ||||
IE10 | IE8 | Chrome | Firefox | |
embed | √ | √ | √ | × |
object | √ | × | √ | × |
ogg | ||||
IE10 | IE8 | Chrome | Firefox | |
embed | × | × | √ | × |
object | × | × | √ | × |
mp3 | ||||
IE10 | IE8 | Chrome | Firefox | |
audio | √ | × | √ | √ |
ogg | ||||
IE10 | IE8 | Chrome | Firefox | |
audio | × | × | √ | √ |
mp3,ogg | ||||
IE10 | IE8 | Chrome | Firefox | |
audio | √ | × | √ | √ |
mp3,ogg | ||||
IE10 | IE8 | Chrome | Firefox | |
audio+ embed | √ | √ | √ | √ |