HTML5 音频 <audio>

直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
dio dio
control 属性供添加播放、暂停和音量控件。
之间插入的内容是供不支持 audio 元素的浏览器显示的：
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;head</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> </span><span style="color: #ff0000;"&gt;charset</span><span style="color: #0000ff;"&gt;="utf-8"</span> <span style="color: #0000ff;"&gt;/></span>
    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;title</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;title</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;head</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;body</span><span style="color: #0000ff;"&gt;></span>

    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;style</span><span style="color: #0000ff;"&gt;="text-align:center;"</span><span style="color: #0000ff;"&gt;></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;video </span><span style="color: #ff0000;"&gt;id</span><span style="color: #0000ff;"&gt;="video1"</span><span style="color: #ff0000;"&gt; width</span><span style="color: #0000ff;"&gt;="420"</span><span style="color: #ff0000;"&gt; style</span><span style="color: #0000ff;"&gt;="margin-top:55px;"</span><span style="color: #0000ff;"&gt;></span>
            <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;source </span><span style="color: #ff0000;"&gt;src</span><span style="color: #0000ff;"&gt;="img/mov_bbb.mp4"</span><span style="color: #ff0000;"&gt; type</span><span style="color: #0000ff;"&gt;="video/mp4"</span> <span style="color: #0000ff;"&gt;/></span>
            <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;source </span><span style="color: #ff0000;"&gt;src</span><span style="color: #0000ff;"&gt;="img/mov_bbb.ogg"</span><span style="color: #ff0000;"&gt; type</span><span style="color: #0000ff;"&gt;="video/ogg"</span> <span style="color: #0000ff;"&gt;/></span><span style="color: #000000;"&gt; Your browser does not support HTML5 video.
        </span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;video</span><span style="color: #0000ff;"&gt;></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br </span><span style="color: #0000ff;"&gt;/></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;onclick</span><span style="color: #0000ff;"&gt;="playPause()"</span><span style="color: #0000ff;"&gt;></span>播放/暂停<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;onclick</span><span style="color: #0000ff;"&gt;="makeBig()"</span><span style="color: #0000ff;"&gt;></span>大<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;onclick</span><span style="color: #0000ff;"&gt;="makeNormal()"</span><span style="color: #0000ff;"&gt;></span>中<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;button </span><span style="color: #ff0000;"&gt;onclick</span><span style="color: #0000ff;"&gt;="makeSmall()"</span><span style="color: #0000ff;"&gt;></span>小<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;button</span><span style="color: #0000ff;"&gt;></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br</span><span style="color: #0000ff;"&gt;/></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a> </span><span style="color: #ff0000;"&gt;controls</span><span style="color: #0000ff;"&gt;="controls"</span><span style="color: #0000ff;"&gt;></span>
            <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;source </span><span style="color: #ff0000;"&gt;src</span><span style="color: #0000ff;"&gt;="img/qiuyinong.mp3"</span><span style="color: #ff0000;"&gt; type</span><span style="color: #0000ff;"&gt;="au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>/mpeg"</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;
            Your browser does not support the au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a> tag.
        </span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a></span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>

    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="text/javascript"</span><span style="color: #0000ff;"&gt;></span>
        <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; myVideo </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;video1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);

        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; playPause() {
            </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;if</span><span style="background-color: #f5f5f5; color: #000000;"&gt;(myVideo.paused)
                myVideo.play();
            </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;else</span><span style="background-color: #f5f5f5; color: #000000;"&gt;
                myVideo.pause();
        }

        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; makeBig() {
            myVideo.width </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;560</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        }

        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; makeSmall() {
            myVideo.width </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;320</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        }

        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; makeNormal() {
            myVideo.width </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;420</span><span style="background-color: #f5f5f5; color: #000000;"&gt;;
        }
    </span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;body</span><span style="color: #0000ff;"&gt;></span>
文件夹内容
1、chrome浏览器下：
2、IE9浏览器下：
3、IE8浏览器下测试：
原文链接：https://www.f2er.com/html5/73145.html
猜你在找的HTML5相关文章
