HTML5 audio API事件-有解無憂

audio API 事件

play() 視頻播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    
    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        ipt.onclick=function(){
            myaudio.play();
        }
    </script>
</body>
</html>

pause() 暫停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        ipt.onclick=function(){
            myaudio.play();
        }
        pau.onclick=function(){
            myaudio.pause();
        }
    </script>
</body>
</html>

duration 回傳音頻總長度

canplay 音頻加載完畢，可以播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">
    <br>
    <br>
    時長：<p id="dura"></p>

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        ipt.onclick=function(){
            myaudio.play();
        }
        pau.onclick=function(){
            myaudio.pause();
        }
        myaudio.addEventListener("canplay",function(){
            dura.innerHTML=myaudio.duration;
        })

    </script>
</body>
</html>

currentTime 設定和獲取音頻的當前播放長度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">
    <br>
    <br>
    時長：<p id="dura"></p>
    當前時長：<p id="curT"></p>

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        ipt.onclick=function(){
            myaudio.play();
        }
        pau.onclick=function(){
            myaudio.pause();
        }

        myaudio.addEventListener("canplay",function(){
            dura.innerHTML=myaudio.duration;
        })

        // 設定或回傳音頻長度
        myaudio.currentTime=20;
        setInterval(function(){
            curT.innerHTML=myaudio.currentTime;
        },100)

    </script>
</body>
</html>

volume 設定聲音

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">
    <br>
    <br>
    時長：<p id="dura"></p>
    當前時長：<p id="curT"></p>

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        // 設定聲音
        // 加不加引號都可以，范圍在0-1
        myaudio.volume=0.5;
        myaudio.volume='0.5';

    </script>
</body>
</html>

audio API事件2

currentSrc 回傳當前地址

不能設定，只能獲取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">
    <br>
    <br>
    時長：<p id="dura"></p>
    當前時長：<p id="curT"></p>

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        myaudio.addEventListener("canplay",function(){
            console.log(myaudio.currentSrc);
        })
    </script>
</body>
</html>

ended 音頻是否結束，回傳布林值

一般用于狀態監聽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">
    <br>
    <br>
    時長：<p id="dura"></p>
    當前時長：<p id="curT"></p>

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        myaudio.addEventListener("ended",function(){
            console.log("音頻播放結束");
            console.log(myaudio.ended);
        })
    </script>
</body>
</html>

loop 設定音頻回圈

true表示回圈，false表示不回圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">
    <br>
    <br>
    時長：<p id="dura"></p>
    當前時長：<p id="curT"></p>

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        myaudio.loop=true;
    </script>
</body>
</html>

playbackRate 音頻倍速

默認為1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">
    <br>
    <br>
    時長：<p id="dura"></p>
    當前時長：<p id="curT"></p>

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        console.log(myaudio.playbackRate);
        myaudio.playbackRate=10;

    </script>
</body>
</html>

timeupdate 音頻播放狀態

我測驗的時候發現點擊了暫停，依然會執行一次音頻播放中

音頻剛開始還沒播放的時候不會執行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <input type="button" value="播放" id="ipt">
    <input type="button" value="暫停" id="pau">
    <br>
    <br>
    時長：<p id="dura"></p>
    當前時長：<p id="curT"></p>

    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        myaudio.addEventListener("timeupdate",function(){
            console.log("音頻播放中...");
        })


    </script>
</body>
</html>

controls 默認控制元件顯示

<audio src="data/imooc.mp3" controls></audio>

不同瀏覽器效果有區別

seeked 音頻拖動完成

seeking 音頻正在拖動

補充：在谷歌瀏覽器下拖動時，seeking觸發次數會遠遠高于seeked

但在360或者火狐瀏覽器測驗時，顯示是一樣的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>

    <audio src="data/imooc.mp3" controls id="myaudio"></audio>

    <p>seeked:<span id="seekedNum"></span></p>
    <p>seeking:<span id="seekingNum"></span></p>

    <script>

        var seekedN=seekingN=0;
        myaudio.addEventListener("seeked",function(){
            console.log("seeked");
            seekedN++;
            seekedNum.innerHTML=seekedN;
        })
        myaudio.addEventListener("seeking",function(){
            console.log("seeking");
            seekingN++;
            seekingNum.innerHTML=seekingN;
        })


    </script>
</body>
</html>

volumechange 聲音改變事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>
    <audio src="data/imooc.mp3" controls id="myaudio"></audio>

    <script>
        myaudio.addEventListener("volumechange",function(){
            console.log("聲音改變了");
        })

    </script>
</body>
</html>

audio API事件4

requestFullScreen 全屏

有瀏覽器前綴

注意只有在HTML里創建的audio標簽才可以全屏

自己在js里創建的audio物件不可以全屏

話說回來audio的全屏是 requestFullScreen

video的全屏是 requestFullscreen

兩個大小寫居然不是一致的，很迷……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>
    <audio src="data/imooc.mp3" controls id="myaudio"></audio>
    <button id="btn">全屏</button>

    <script>
        btn.onclick=function(){
            myaudio.webkitRequestFullScreen();//可以全屏
        }

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>
    <!-- <audio src="https://www.cnblogs.com/chenyingying0/p/data/imooc.mp3" controls id="myaudio"></audio> -->
    <button id="btn">全屏</button>

    <script>
        var audio=new Audio();
        
        btn.onclick=function(){
            audio.webkitRequestFullScreen();//可以全屏
        }

    </script>
</body>
</html>

不過想想也是，控制元件都沒有，還扯什么全不全屏……

load 音頻重新加載，頁面不重繪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>
    <audio src="data/imooc.mp3" controls id="myaudio"></audio>
    <button id="btn">重新加載</button>

    <script>

        btn.onclick=function(){
            myaudio.load();
        }

    </script>
</body>
</html>

另外，替換src屬性也能起到重新加載的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>
    <audio src="data/imooc.mp3" controls id="myaudio"></audio>
    <button id="btn">重新加載</button>

    <script>

        btn.onclick=function(){
            myaudio.src="data/imooc.mp3";
            //myaudio.load();
        }

    </script>
</body>
</html>

因此，想要實作重新加載的效果，有兩種方法：

一種是load

一種是替換src屬性

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/11025.html

標籤：HTML5

上一篇：回應式網頁設計專案#2---CnBlogs用戶意見調查 (fantasy)

下一篇：audio實作自定義音頻播放器