HTML - 音频

前一段时间,在网页上插入音乐或声音是相当复杂的。如今,这个问题就解决了,添加声音成为相当简单的事。

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

建议使得高度和宽度成正比以避免出现问题。

要隐藏播放器,把隐藏属性的值(目前这是false的)得替换为true. 如果你是绝对确保用户不希望停止声音,得做到这个东西。

控制和操纵音频播放器

让我们看看上面的例子:

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />
  • autostart - 设置加载该网页后其声音是否将立即开始。 可以具有true或false值。
  • loop - 设定其声音是否将永久重播。可以具有true或false值。
  • volume - 可以具有从1到100的任何值。

你可以点一点这些属性以便更好地记住而理解它们,并且还意识到,较高的音量可能令用户讨厌。

HTML 5 音频标签

通过HTML5的推广,音频标签已传播速度非常快,这是由当前的浏览器得到很好的支持。音频标签是在HTML页面里用来添加声音和音乐的。 目前最大的 音频 标签支持3种类型的音频文件:

  • mp3 - MIME-type audio/mpeg
  • wav - MIME-type audio/wav
  • ogg - MIME-type audio/ogg
html<audio controls>
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
	Your browser does not support the audio tag.
</audio>

Demo

BrowserMP3WavOgg
Internet Explorer
Chrome
Firefox
Safari
Opera

在这里,你可以找到一个简单但功能强大的发生器 HTML5音频标签