zoukankan      html  css  js  c++  java
  • 原生js控制audio标签播放、暂停、重新加载

    audio不仅是一个标签,也是window下的一个对象,作为对象,具有一些对象属性和对象方法:

      对象属性:

        currentTime:获取当前播放时间

        duration:获取歌曲的总时间

        pause:是否暂停,返回布尔值

      对象方法:

        play():播放

        pause():暂停

        load():重新加载

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>audio播放暂停重新播放</title>
    </head>
    <body>
        <audio
            src="https://ip-h5-nf01-sycdn.kuwo.cn/08fc62da0d838431d2c6135ddd66c5ae/5e1bdce5/resource/n2/97/38/2347707388.mp3"
            controls preload id="music1">
        </audio>
        <button id="bf" onclick="bf();">播放</button>
        <button onclick="rbf();">重新播放</button>
        <script>
            function rbf() {
                var audio = document.getElementById('music1');
                var bf=document.getElementById("bf");
                audio.currentTime = 0;
                audio.play();
                bf.innerText="暂停";
            }
    
            function bf() {
                var audio = document.getElementById('music1');
                var bf=document.getElementById("bf");
                if (audio !== null) {
                    if (audio.paused) {
                        audio.play(); //audio.play();// 这个就是播放  
                        bf.innerText="暂停";
                    } else {
                        audio.pause(); // 这个就是暂停
                        bf.innerText="播放";
                    }
                }
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    GCD HDU
    Finding Lines UVALive
    Chinese Mahjong UVA
    DNA Evolution CodeForces
    String Reconstruction (并查集)
    Number Cutting Game HDU
    Paint the Wall ZOJ
    Star sky CodeForces
    Haunted Graveyard ZOJ
    GuGuFishtion HDU
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12186595.html
Copyright © 2011-2022 走看看