HTML5中声音播放模块的加载与实现 【摘要】HTML是互联网上使用最广泛的语言。 HTML 的最后一个版本诞生于 1999 年，从那时起，网络世界发生了很大的变化。 新一代 HTML5 正在蓬勃发展，然而，大多数现代浏览器已经拥有相当多的 HTML5 支持。 HTML5相比之前的版本添加的新功能可以使网页的开发和使用更加方便，具有跨平台的特性[1]并与浏览器很好地集成。 声音模块的加入给用户和开发者带来了极大的便利。 本文主要讲解HTML5中声音播放模块的加载与实现。 [关键词] HTML5； 浏览器； 声音模块； 音频对象 自2008年发布第一稿以来，HTML5（超文本标记语言版本5）引起了业界的广泛关注。 随着中国联通互联网的广泛应用和快速发展，HTML5的前景越来越广阔，逐渐成为下一代互联网的重要组成部分。 1.声音模块Audio元素为HTML5应用程序提供原生多媒体支持，允许用户直接在页面上播放声音和视频文件，无需插件。 在HTML5中Audio元素出现之前html 播放声音，开发者如果需要在页面上播放多媒体文件，需要使用大量的object等相关标签并为其设置特定的参数，并且不得不将标签化的多媒体文件交出去交给第三方插件进行处理。 。
插件是造成浏览器不稳定的主要原因，插件引起的更新提示也给用户带来了很大的不便。 Audio元素的出现正是为了解决这个问题。 在大多数基于HTML5的应用中，音效也是必不可少的。 与动画效果一起，它们极大地增强了应用程序的表现力。 HTML5对多媒体的支持恰恰可以满足这一需求。 通过使用 HTML5 Audio 元素及其包含的相应方法，您可以控制 HTML 页面中声音的播放。 音频标签的属性是属性描述autoplayautoplay。 如果出现此属性，则音频准备好后将立即播放。 controlscontrols如果出现此属性，则会向用户显示控件，例如播放按钮。 Looploop 如果出现此属性，则每次音频结束时都会重新开始播放。 preloadpreload 如果出现此属性，则在页面加载并准备好播放时将加载音频。 如果使用“自动播放”，则忽略此属性。 srcurl 是要播放的音频的 URL。 2.适应多种浏览器的音频资源选择和加载方法目前大多数浏览器都支持Audio元素html 播放声音，但不同的浏览器对特定的音频格式和相应的多媒体数字信号编解码器的支持不同。 不同浏览器支持三种音频格式：IEFirefox3.5Opera10.5Chrome3.0Safari3.0OggVorbis。 为了让这个引擎能够适配更多的浏览器，需要先判断浏览器的音频格式支持情况，并根据判断结果进行选择。 加载相应的音频资源。
首先，需要判断浏览器是否支持audio元素。 使用 document.createElement() 方法创建音频元素。 如果浏览器支持该audio元素，则创建成功，并返回对audio元素的引用，用于判断浏览器是否支持该audio元素。 接下来，您需要确定浏览器对音频格式的支持。 使用audio元素方法canPlayType()分别判断mp3、wav、acc、ogg(Vorbis)，完成audioFormatSupported对象并将判断结果保存到其属性值中。 canPlayType() 方法的返回值为“可能”、“也许”或空字符串。 其中“可能”和“也许”表示浏览器可能支持这种格式的音频文件。 VaraudioTest=document.createElement('audio');If(audioTest){audioFormatSupported={Mp3:audioTest.canPlayType('audio/mpeg;'), Wav:audioTest.canPlayType('audio/wav;'), Acc:audioTest .canPlayType('audio/aac;'), ogg:audioTest.canPlayType('audio/ogg;codecs="vorbis"') 为了支持更多的浏览器，为同一个声音制作不同格式的音频文件，并放置在HTML5 应用程序的资源文件夹。
例如：shoot_mp3：“sounds/shoot.mp3”，shoot_wav：“sounds/shoot.wav”，shoot_ogg：“sounds/shoot.ogg”，使用audioFormatSupported判断浏览器是否支持该格式。 if (format==”mp3”&&(audioFormatSupported.mp3==”可能”||audioFormatSupported.mp3==”maybe”)) //加载mp3音频文件}elseif(format==”wav”&&(audioFormatSupported. wav==“可能”||audioFormatSupported.wav==“也许”))
发表评论