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浏览器下测试：

HTML5 音频 <audio>的更多相关文章

  1. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  2. html5音频视频专题

    html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...

  3. HTML5音频可视化频谱跳动代码

    今天学习到用canvas来写  HTML5音频可视化频谱跳动代码  将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...

  4. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

  5. html5 音频

    目前,web页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多的浏览器使用了不同的插件.而html5的到来,给我们提供了一个标准的方式来播放web中音频文件,用户不再为浏览器 ...

  6. HTML5 音频视频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

  7. html5 音频和视频（audio And video）

    1.音频和视频  Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定 ...

  8. [html5] 学习笔记-html5音频视频

    HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight  或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...

  9. 移动端HTML5音频与视频问题及解决方案

    最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频. 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者 ...

随机推荐

  1. Java 用LinkdeList实现52张扑克牌

    用LinkdeList实现52张扑克牌(不含大小王)的洗牌功能.提示:花色 ,和数字分别用数组存储. import java.util.LinkedList; import java.util.Ran ...

  2. .net 文件上传大小的设置

    直接在配置文件web.config 中进行如下配置,主要需要明白的就是 配置的 单位是 Byte,  所以一定计算清楚,不然会在这里纠结很久!!! <configuration> < ...

  3. USACO翻译：USACO 2014 DEC Silver三题

    USACO 2014 DEC SILVER 一.题目概览 中文题目名称 回程 马拉松 奶牛慢跑 英文题目名称 piggyback marathon cowjog 可执行文件名 piggyback ma ...

  4. 关于Node.js的总结

    Node是个啥? 1.Node 是一个服务器端 JavaScript 解释器,可是真的以为JavaScript不错的同学学习Node就能轻松拿下,那么你就错了,总结:水深不深我还不知道,不过确实不浅. ...

  5. 学习笔记：delphi多线程知识

    最近一直在温习旧的知识,刚好学习了一下Java的线程安全方面的知识,今天想起之前一直做的Delphi开发,所以还是有必要温习一下,看看这些不同的编程语言有什么不同之处. Delphi的线程同步方法: ...

  6. HDFS NameNode 设计实现解析

    接前文 分布式存储-HDFS 架构解析,我们总体分析了 HDFS 架构的主要构成组件包括:NameNode.DataNode 和 Client.本文首先进一步解析 HDFS NameNode 的设计和 ...

  7. .NET程序反汇编JustDecompile 开源

    JustDecompile是Telerik公司推出一个免费的.net反编译工具,支持插件,与Visual Studio 集成,能够创建Visual Studio project文件.JustDecom ...

  8. Python黑帽编程 3.2 ARP监控

    Python黑帽编程 3.2 ARP监控 在第3.1节<ARP欺骗>中,我们学习了ARP的基本原理,使用Python实现了我们自己的ARP欺骗工具.在上一节的基础上,我们来实现一个ARP监 ...

  9. DDD领域驱动设计之领域服务

    1.DDD领域驱动设计实践篇之如何提取模型 2.DDD领域驱动设计之聚合.实体.值对象 3.DDD领域驱动设计之领域基础设施层 什么是领域服务,DDD书中是说,有些类或者方法,放实体A也不好,放实体B ...

  10. Mint Linux 安装 DotnetCore 遭遇无法修正错误，因为您要求某些软件包保持现状，就是它们破坏了软件包间的依赖关系

    evlon@evlon-ThinkPad-T530 ~ $ apt install dotnet-dev-1.0.0-preview2-003121 正在读取软件包列表... 完成 正在分析软件包的依 ...