zoukankan      html  css  js  c++  java
  • <audio> 标签简介

    定义和用法

    <audio> 标签定义声音,比如音乐或其他音频流。

    实例

    一段简单的 HTML 5 音频:

    <audio src="someaudio.wav">
    您的浏览器不支持 audio 标签。
    </audio>

    提示和注释

    提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

    属性

    属性描述
    autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
    controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
    loop loop 如果出现该属性,则每当音频结束时重新开始播放。
    preload preload

    如果出现该属性,则音频在页面加载时进行加载,并预备播放。

    如果使用 "autoplay",则忽略该属性。

    src url 要播放的音频的 URL。

     

     

     

     

    全局属性

    <audio> 标签支持 HTML 5 中的全局属性

    事件属性

    <audio> 标签支持 HTML 5 中的事件属性

     

     播放暂定简单实例

            <audio id="myaudio"></audio>
            <span class="btnOne" id="play" onclick="playAudio();">Play</span>
            <input type="text" id="audiofile" size="80" value="../images/wind.mp3" />
    
            <script type="text/javascript">
                var currentFile = "";
                function playAudio() {
                    if (window.HTMLAudioElement) {
                        try {
                            var oAudio = document.getElementById('myaudio');
                            var btn = document.getElementById('play');
                            var audioUrl = document.getElementById('audiofile');
    
                            //判断时候有值
                            if (audioUrl.value !== currentFile) {
                                oAudio.src = audioUrl.value;
                                currentFile = audioUrl.value;
                            }
    
                            //播放或停止
                            if (oAudio.paused) {
                                oAudio.play();
                                btn.textContent = "Pause";
                            } else {
                                oAudio.pause();
                                btn.textContent = "Play";
                            }
    
                        } catch (e) {
                            alert(e);
                        }
                    }
                }
            </script>

     简单实例2:使用Bootstrap按钮

    <div class="container">
        <p>../content/audio/海阔天空.mp3</p>
        <button class="btn btn-primary">
            <i class="glyphicon glyphicon-play"></i>
        </button>
    </div>
    <audio id="myAudio"></audio>
    <script>
        var currentFile = '../content/audio/海阔天空.mp3';
        //判断浏览器是否支持audio
        if (!window.HTMLAudioElement) {
            alert('您的浏览器不支持audio标签');
        } else {
            //绑定按钮事件
            $('.btn').click(function () {
                var icon = $(this).find('i');
                var myAudio = document.getElementById('myAudio');
                //播放
                if (myAudio.src.length <= 0) {
                    myAudio.src = currentFile;
                }
                if (myAudio.paused) {
                    myAudio.play();
                    icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
                } else {
                    myAudio.pause();
                    icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
                }
            });
        }
    </script>

  • 相关阅读:
    初识jQuery
    JDBC和数据库连接池
    JavaScript Cookie
    服务器常用的状态码
    XMLHttpRequest 对象-回调函数
    AJAX-responseXML 属性
    JavaScript闭包
    Angular.forEach用法总结
    随机梯度下降法优化实例
    梯度下降法和随机梯度下降法
  • 原文地址:https://www.cnblogs.com/tianma3798/p/4149465.html
Copyright © 2011-2022 走看看