HTML5 audio API事件

本文轉載自查看原文 2020-03-04 21:52 1320 html / html5 / h5

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="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屬性

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5

開大你的音響，感受HTML5 Audio API帶來的視聽盛宴 HTML5 Audio/Video 標簽,屬性,方法,事件匯總 HTML5 video/audio監聽事件屬性及方法 html5 audio總結 HTML5 ——web audio API 音樂可視化(一) html5中的audio和video屬性和事件匯總 HTML5 Audio/Video 標簽,屬性,方法,事件匯總 HTML5 audio元素如何使用js與jquery控制其事件 HTML5 Audio標簽方法和函數API介紹