HTML5 audio API事件

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/04/12416455.html
-Advertisement-
Play Games

audio API 事件 play() 視頻播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>audio</title> <style> audio{ width:500px; } </style> </ ...


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 音頻正在拖動

<!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;
        }
    </<
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 遠程桌面管理（RDCMan）
    RDC簡介： 1. 遠程桌面(mstsc.exe)是微軟系統自帶的用以連接遠程電腦的一個小工具。 2. 而多遠程桌面管理軟體RDC是用來對多個遠程桌面進行管理和方便在其間快速切換的工具，也是微軟提供的工具，但非原生自帶，需自行下載。可以這麼理解，mstsc.exe只是RDCMan.exe的一個子集 ...
  • 用U盤裝CentOS 7出現dracut:/#問題的解決辦法
    先說一說出現問題的具體情況: 製作完U盤啟動盤後，開機按熱鍵進入bios，設置從U盤啟動，以後logo一閃而過，出現兩個選項，選擇Install CentOS Linux 7進行安裝。 然後，黑色的屏幕出現一堆白色字元後，在最下麵一行顯示dracut:/ ，後面還有一個下劃線閃爍，等著用戶輸入。 下 ...
  • [Linux] 解決CentOS下Requires: libjson-c.so錯誤
    當安裝某些rpm包的時候 , 會爆出這個錯誤 Requires: libjson-c.so json-c是c語言下的json庫 , 如果在centos6下可以訪問下麵這個頁面找到64位的rpm包 , 一定要看清是4位還是32位 http://rpmfind.net/linux/rpm2html/se ...
  • mybatis in 查詢使用String做條件
    在使用 mybaits 進行 in 查詢時 如果傳入參數是List或者Array，則直接用foreach 如果參數是String類型的使用in (${xxxx})，不進行編譯，直接放進查詢條件 例如 String param = “1,2,3”； 使用 in (#{param}) 結果是 in (" ...
  • 快速掌握ES6的class用法
    1.如何構造？ 先複習一下es5常用的構建類的方法： 1. 首先es5的寫法使用原型進行對象的方法的，為什麼不在構造函數里添加方法呢？ 因為實例化對象的時候，會重覆的建立好多相同的方法，浪費資源。所以需要把對象的方法掛載到prtotype里。 2. 關於new和this的綁定問題，可以大概簡化為： ...
  • ES6 - 基礎學習(13): Iterator(迭代器) 和 for...of 迴圈
    Iterator Iterator 是 ES6 引入的一種新的遍歷機制，迭代器有兩個核心概念： 1、迭代器是一個統一的介面，它的作用是使各種數據結構可被便捷的訪問，它是通過一個鍵為Symbol.iterator 的方法來實現。 2、迭代器是用於遍曆數據結構元素的指針（如資料庫中的游標）。 迭代過程 ...
  • JS複雜數據拆分重組
    var arr = [{id: 1},{id: 2},{id: 3},{id: 'blank'},{id: 4},{id: 5},{id: 'blank'}, {id: 6},{id: 'blank'}] 1. 把 arr轉換為二維數組：以blank分割，如下 [ [{id: 1},{id: 2}, ...
  • JS數組之操作方法
    操作方法 1. concat() 拼接數組 使用此方法可以拼接元素，並組成新數組，結果返回新數組的副本。（不會影響原數組） 2. slice(start, end) 切片（截取片段） 使用此方法可以截取數組元素，可以傳入一個參數或兩個參數。參數表示數組下標索引。（不會影響原數組） 傳入一個參數表示， ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類