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 音频正在拖动

<!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属性

原文地址：https://www.cnblogs.com/chenyingying0/p/12416455.html

时间： 2024-10-14 22:42:50

HTML5 audio API事件的相关文章

HTML5 audio API的研究与学习1

HTML5 audio 1.audio sprite 音频精灵的主要思想其实跟css精灵差不多,将一个音频合成到一个音频,然后通过currentTime获取当前播放时间进行区分,不过在这里执行以下代码之前需将audio 先加载到页面当中.当时怎么判断页面已经加载完声音呢,在移动端audio的很多属性支持的都不是很好,在尝试了很多也在网上找了很多资料之后,暂且发现可以使用AudioContext对象去管理与播放声音 <input type="button" value="

video/audio API 事件

.loadedmetadata  加载元数据 .progress   获取媒介数据数据 .canplay  视频可以被播放 .canplaythrough   视频可以一直播放到结束 .timeupdate .pause  暂停 .seeking  拖动进度条 .waiting .volumechange  音量改变 .ended    视频结束 原文地址:https://www.cnblogs.com/jian1234/p/9821162.html

【HTML5】Web Audio API打造超炫的音乐可视化效果

HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去star或者fork我,源码注释超清楚的哦~~之前看刘大神的文章和源码,感觉其他方面的内容太多了,对初学者来说可能一下子难以抓到Web Audio API的重点,所以我就从一个初学者的角度来给大家说说Web Audio API这些事吧. Web Audio API与HTML5提供的Audio标签并不是同

HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

使用Audio API设计绚丽的HTML5音乐播放器

HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道和一些元数据,这些是和你的视频或者音频控件绑定到一块的,这样才形成了一个完整的播放组件. 浏览器支持情况: 浏览器 支持情况 编解码器 Chrome 3.0 Theora . Vorbis .Ogg H.264 . AAC .MPEG4 FireFox 3.5 Theora . Vorbis .Og

HTML5 audio元素如何使用js与jquery控制其事件

前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜欢自己瞎折腾.(来一些隐形的链接,据说有推广效果,本文原创官网地址:www.pushself.com) 听一个写博客的朋友说周末的博客阅读量明显下降,周末大好时光不出去泡妹子的肯定是有难言之隐的.先来重温一下audio标签的基本属性 定义和用法 <audio> 标签定义声音,比如音乐或其他音频流.

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio> <video> 标签属性: src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放

HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video> 标签属性; src:视频的URL; poster:视频封

HTML5 Audio/Video 标签,属性,方法,事件汇总

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 <audioid="media"src="http://www.abc.com/test.mp3"controls></audio> <video> 标签属