HTML5 音频 <audio>

HTML5 提供了播放音频的标准。

一、Web 上的音频

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

二、使用audio标签

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

control 属性供添加播放、暂停和音量控件。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body>

        <div style="text-align:center;">
            <video id="video1" width="420" style="margin-top:55px;">
                <source src="img/mov_bbb.mp4" type="video/mp4" />
                <source src="img/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video.
            </video>
            <br />
            <button onclick="playPause()">播放/暂停</button>
            <button onclick="makeBig()">大</button>
            <button onclick="makeNormal()">中</button>
            <button onclick="makeSmall()">小</button>
            <br/>
            <br/>
            <audio controls="controls">
                <source src="img/qiuyinong.mp3" type="audio/mpeg">
                Your browser does not support the audio tag.
            </audio>
        </div>

        <script type="text/javascript">
            var myVideo = document.getElementById("video1");

            function playPause() {
                if(myVideo.paused)
                    myVideo.play();
                else
                    myVideo.pause();
            }

            function makeBig() {
                myVideo.width = 560;
            }

            function makeSmall() {
                myVideo.width = 320;
            }

            function makeNormal() {
                myVideo.width = 420;
            }
        </script>

    </body>

</html>

文件夹内容

1、chrome浏览器下:

2、IE9浏览器下:

3、IE8浏览器下测试:

时间: 2024-10-13 04:13:20

HTML5 音频 <audio>的相关文章

HTML5 音频视频

audio 元素能够播放声音文件或者音频流. <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>HTML5 音频播放</title> </head> <body> <!-- audio(音频) control(控制器) 标签:<audio> 定义声音 <sou

HTML5音频播放,歌词同步,及视频播放功能(JPlayer、JWPlayer、VideoJS)

近期项目中用到音频视频播放.所以就写了一个demo: 这个是JPlayer插件的视频播放: 这个是音频播放,歌词同步: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <!--注意:在IIS上配置的时候,需加入mime映射,否则歌词出不来.在IIS列表中找到"MIME类型".进行加入.lrc类型;.mp4类型文件--> <head>     <

Html5之高级-5 HTML5音频处理(在H5中播放音频、编程实现音频播放器)

一.在HTML5中播放音频 audio 元素 - audio元素可以实现在HTML页面中嵌入音频内容,该元素的属性可以设置是否自动播放.预加载及循环播放等 - audio元素提供了播放.暂停和音量控件来控制音频 - 使用audio元素提供三种音频格式的文件:MP3.Ogg.Wav - MP3: 采用mpeg音频解码器 - Ogg: 采用ogg音频解码器 - Wav: 采用wav音频解码器 - 语法结构 audio 属性 - audio 元素支持以下属性 - src: 指定播放文件的URL,可通过

HTML5音频选择播放样式

今天记录HTML5的音频播放样式,首先HTML5音频样式需要用到JS,这里我用了两种,这个代码之前老师也讲过,但是我这里记录的是自己的代码. 首先jquery-1.12.2.js是配置文件,但是MusicBox.js是自己手动添加的一个JS文件. 看HTML5的代码: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>音频

克服 iOS HTML5 音频的局限

尽管 HTML5 音频表现出色,但作为一个仍在开发的规范,它仍有很多局限.移动版 Safari 甚至引入了更多的限制.在本文中,您将了解 HTML5 在移动版 Safari 方面的局限性.一些工作示例提供了相应的解决方案和全面的变通方法.通过本文您将了解在移动版 Safari 中使用 audio sprite 的好处,并尝试使用几个独到的解决方案来绕过 iOS 中的 HTML5 局限. 目录[-] 常用的缩略语 HTML5 音频的局限性 格式支持 表 1. HTML5 视频格式支持 清单 1.

关于html5音频如何应用及解决方法?

叙述HTML5音频支持状态糟糕的文章已有很多.事实就是如此,所以我不会在此赘述这一观点.相反,我主要着眼于开发者在特定平台中将会遇到的问题及潜在解决方式. HTML5 audio from codecanyon.ne table 上表总结了网页浏览器当前的市场份额.Internet Explorer依然是主要的桌面浏览器,紧随其后的是Chrome和Firefox.在手机领域中,Safari主导市场,这主要归功于强大的iOS品牌,紧随其后的是Android.因此,我们将照此顺序逐一进行论述. 给刚

支持实现HTML5音频:嵌入简单的声音提示技巧

了解如何使用HTML音频元素嵌入在网页中的声音容易.在本教程中都包含大量的代码示例. 截至目前,在Web浏览器中的音频播放一直是位一个黑色的艺术.传统上,有几种方法可以嵌入在网页中的声音 -一些比别人更好的工作,和许多人只工作,如果你碰巧使用正确的浏览器,用正确的插件. 无处不在的Flash插件已经在很大程度上帮助,因为Flash可以很容易地嵌入音频的方式,与大多数浏览器.然而,这并不能帮助iPhone和iPad不支持Flash的浏览器,如Safari. 总之,这是一个有点乱. 幸运的是,HTM

HTML5 音频播放 &lt;audio&gt;

HTML5 音频播放 ============================================================================= <audio> 属性与<video>标签相同,用法也相同 ====================================HTML 5 之前的音频播放================================== =====================================音频文

HTML5音频-视频处理demo

HTML5视频-音频处理(最后有demo) * 基本内容 * 使用Flash技术处理HTML页面中的视频内容 * 包含音频.动画.网页游戏等 * 特点 * 浏览器原生不支持(IE浏览器要求安装ActiveX组件) * 性能不好(不能过多地使用) * 智能移动端并不支持Flash技术 * 命运 * Flash的母公司Adobe公开宣布放弃 * 目前用于替代Flash技术最好的选择 - HTML5 * 几乎所有浏览器原生支持<video>元素 * 性能更高 * 智能移动端支持非常好 * 如何实现视

HTML5音频与视频

HTML5的两个重要元素audio和video,对于这两个元素,HTML5规范提供了通用.完整.可脚本化控制的API. audio元素来播放声音文件或音频流,controls属性用于提供播放.暂停和音量控件,音频不加这个特性,那么页面上任何信息都不会出现,因为音频元素唯一可视化信息就是对于的控制界面.使用source元素来连接到不同的音频文件,浏览器会自动选择第一个可以识别的格式. <audiosrc="samplesong.mp3" controls="control