html5 是 HTML5 的一个新标签，用于定义声音，例如音乐或其他音频流。
HTML5 标签
HTML5audio 让音乐卷土重来
HTML5使用aduio标签构建音乐播放器
文本内容可以放置在开始标记和结束标记之间，以便较旧的浏览器可以显示不支持该标记的消息。
您的浏览器不支持音频标签
属性值说明
自动播放属性">自动播放
自动播放
如果存在此属性，则音频一旦准备好就会播放。
控件属性">控件
控制
如果存在，则会向用户显示控件，例如播放按钮。
循环属性">循环
循环
如果存在此属性，则每次音频结束时都会重新开始循环播放。
预加载属性">预加载
预载
如果存在此属性，则音频将在页面加载时加载并准备播放。
如果使用“自动播放”，则忽略此属性。
src 属性">src
网址
要播放的音频的 URL。 还可以使用标签设置音频。
HTML5Audio标签可以支持wav、mp3、ogg、acc、webm等格式，但是有一种非常重要的音乐文件格式midi（扩展名mid）在各大浏览器中都没有外部支持（详细信息请参见这里）。 并非所有浏览器都支持MP3OGG等，而且由于版权问题，各个浏览器支持的格式也不同。
浏览器和音频兼容性
浏览器制造商并不都同意某种音频文件格式。 对于图像，PNG、JPEG 或 GIF 文件可以在任何浏览器中加载到您的网页中。 不幸的是，音频文件并非如此。 表 1 显示了可以在网页中使用的音频文件格式html5音乐播放器，但并非所有格式都可以在所有浏览器中使用。 Chrome、Internet Explorer 9 (IE9) 和 Safari 等浏览器不支持 WAV 文件，这是一种使用未压缩格式的即将消亡的标准。
HTML5 浏览器和音频格式兼容性
音频格式
铬合金
火狐浏览器
IE9
歌剧
苹果浏览器
奥格
支持
支持
支持
不支持
不支持
MP3
支持
不支持
支持
不支持
支持
音频格式
不支持
支持
不支持
支持
不支持
没有通用的文件格式，并且每个浏览器都有单一的文件格式意味着至少 2/5 的浏览器难以播放单独的声音。 这不是浏览器制造商之间顽固地努力就单一音频标准达成一致的问题，而是涉及专利权和版税的法律和财务问题。 不受软件专利限制的OGG格式旨在一劳永逸地解决这个问题。 然而，在撰写本文时，Opera 和 Safari 都不支持 OGG。 可用的 WAV 和 MP3 文件比 OGG 多得多，因此浏览器制造商无疑考虑到了这一点。 MP3 作为事实上的标准是一个很好的解决方案。
解决方案：使用三种文件类型和标签
鉴于目前的情况，您可能会觉得现在不是在 HTML5 页面上使用音频的黄金时机。 在某些方面这可能是正确的，但 HTML5 提供了一个解决方案，使您最喜欢的浏览器能够找到兼容的格式。
当与标签结合使用时html5音乐播放器，标签可以嵌套在容器内。 假设您是瓦格纳的粉丝，想在 HTML5 网页上聆听他的戏剧《女武神的骑行》（“The Valkyries”）。 首先，您需要获取三种文件类型的音乐，即 OGG、MP3 和 WAV。 将此音乐文件放在与 HTML5 文件相同的文件夹中。 然后，将每个文件名放在单独的标签中，但音频容器中的所有源标签均由 组成，如下所示。
无论您的访问者使用哪种浏览器，它都会手动选择它读取的第一个文件类型并为您播放声音。
浏览器音频控件：没有两个是相同的
一旦您决定要在网站上提供音频，您就面临着一个有趣的设计选择。 每个浏览器都有不同的外观，而且看起来是故意设计得不同的。 下面的图 1 显示了该浏览器控件的外观。
图 1：不同浏览器上的音频控件
不仅是 Chrome，所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件，还显示声音文件的总秒数。 使用 HTML5 标准和浏览器支持，开发人员可以相信用户将获得类似的 HTML5 音频体验，因为浏览器控件是相似的。 您还可以使用Flash和Silverlight等插件创建控件，不同用户的体验可能会有所不同。
各个浏览器（例如 IE9）甚至有自己的声音控制栏，在浏览器本身之外运行。 当用户打开任何有声音的网站时，他们可以从Windows任务栏控制声音，并可以预览当前正在播放的声音。
html代码（隐藏播放控件）
代码演示（隐藏播放控件）
演示示例：
H5页面用什么软件比较好，关键看你需要做什么？
如果你只是想制作一些同学圈里经常听到的电子相册、电子邀请函、抽奖等，可以使用一些互联网工具html5编辑器html5编辑器，比如人人秀、一骑秀、iH5、酷网等。 事实上，并不是所有这样的工具都是免费的，你仍然需要支付一定的费用才能实现一些强大而精彩的功能。 它们都为用户提供了一些模板，你可以根据自己的实际需要更改里面的图片、文字、音乐等。 这些工具大多数都具有模板和编辑功能。 模板更适合新手用户，编辑功能更适合有一定设计功底的人。
如果从学习和开发的角度来说使用哪个软件更好，这是仁者见仁智者见智的。 开发工具有很多如：Dreamweaver、EditPlus、HBuilder、MicrosoftVisualStudio等。
Dreamweaver：简称“DW”，英文名“Dream Weaver”，最初为德国MACROMEDIA公司开发，2005年被Adobe收购。 DW是一款集网页制作和网站管理于一体的所见即所得的网页代码编辑器。 有了它，就可以轻松创建跨平台限制、跨浏览器限制的动态网页。
EditPlus：是日本SangilKim（ES-Computing）出品的一款精致而强大的Windows编辑器，可以处理文本、HTML和编程语言。 您甚至可以通过设置用户工具将其用作 C、Java、Php 等语言的简单 IDE。
HBuilder：是DCloud（数字天堂）推出的支持HTML5的Web开发IDE。 HBuilder 使用 Java、C、Web 和 Ruby 编译。 HBuilder本身的主体是由Java编译的。 它基于Eclipse，所以天然兼容Eclipse插件。 快速是HBuilder的最大优势。 通过完整的句子提示、代码输入法、代码块等，大大提高了HTML、js、css的开发效率。
MicrosoftVisualStudio：（简称VS）是Google法国的一系列开发工具包产品。 VS是一套基本完整的开发工具，它包含了整个软件生命周期所需要的大部分工具，如UML工具、代码控制工具、集成开发环境（IDE）等。 编写的目标代码适用于 Google 支持的所有平台，包括 MicrosoftWindows、WindowsMobile、WindowsCE、.NETFramework、.NETCompactFramework 以及 MicrosoftSilverlight 和 WindowsPhone。 VisualStudio是目前最流行的Windows平台应用程序集成开发环境。
作为开发者，虽然这些软件只是一个工具，但是你可以根据自己的习惯使用它们来制作h5页面。 关键是看看您使用该工具的舒适度和方便程度。
发表评论