audio/video媒体

最新推荐文章于 2023-12-08 09:46:11 发布

我本浪人--游吟世间

最新推荐文章于 2023-12-08 09:46:11 发布

阅读量224

点赞数

分类专栏：前端开发文章标签： audio/video媒体

本文链接：https://blog.csdn.net/qq_41760521/article/details/102588208

版权

前端开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

基本使用：

<audio src="./source/song.mp3"></audio>

<video src="./source/video.mp4“ poster></video>

var audio = new Audio(‘song.mp3’);

var audio = document.createElement(‘audio’);

浏览器支持情况：

canPlayType()方法：

audio.canPlayType() 返回probably或者maybe，返回空为不支持

方法：

play() 播放

pause() 停止

load():重置媒体元素并重新载入媒体，可中止正在进行的任务或事件

属性：

autoplay/controls/loop

preload(none/metadata/auto):是否预加载

1、none:不进行预加载。

2、metatata:部分预加载。

3、auto:全部预加载
currentSrc: 返回资源链接(注意要资源加载完成才能获取到)

duration：媒体持续时间(总时长，注意要资源加载完成才能获取到)

可由在该事件下获取：audio.oncanPlay = function () {}
currentTime: 返回或设置资源当前时间
volume: 音量[0-1]，可读可写

muted:静音

playbackRate: 读取或设置媒体资源播放的当前速率（大于1快放，大于0小于1慢放，无倒放）
paused/ended/seeking: 查询媒体播放状态，返回true/false

1、paused:是否暂停

2、ended:是否结束了

3、seeking:正在请求某一播放位置的媒体数据
played/buffered/seekable: 均返回一个TimeRanges对象

(timeRanges对象的length属性为部分时间段，end(i)返回已播放时间段的结束时间，start(i)返回已播放时间段的开始时间)

1、played：标明媒体资源在浏览器中已播放的时间范围。

2、buffered: 确定浏览器已经缓存媒体文件

3、seekable: 表明可以对当前媒体资源进行请求

事件：

play: 媒体开始播放时触发

pause：媒体暂停时出发

ended: 资源播放结束

canplay: 浏览器能够开始播放媒体数据，但是不确定已当前的速率能否顺利的播放完媒体。

实例：（使用js动态生成）

<body>
    <script>
        // 动态生成
        var myAudio = new Audio('./source/银临 - 【插曲】意难平.flac');
        myAudio.controls = true;
        document.body.appendChild(myAudio);
        //body标签比较特殊，直接可以使用
    </script>
</body>

相当于使用HTML：

<audio id="myAudio" controls src="./source/银临 - 【插曲】意难平.flac"></audio>

注：判断一个对象中是否有那个方法;

 <script>
        var obj = {
            aa: function() {
                console.log(8);
            }
        }
        if (obj.aa) {   //判断obj中是否有aa()方法
            console.log("lalll");//控制台输出结果，则表明存在该方法
        }
    </script>

判断浏览器是否支持各类格式的音频：

<audio id="myAudio" controls src="./source/银临 - 【插曲】意难平.flac"></audio>
    <script>
        var myAudio = document.getElementById('myAudio');
        if (myAudio.canPlayType) {
            if (myAudio.canPlayType('audio/mpeg') != "") {
                document.write('您的浏览器支持mp3编码');
            }
            if (myAudio.canPlayType('audio/ogg; codecs="vorbis"') != "") {
                document.write('您的浏览器支持oog编码');
            }
            if (myAudio.canPlayType('audio/mp4; codes="mp4a.40.5"') != "") {
                document.write('您的浏览器支持aac编码');
            }
        } else {
            document.write("您的浏览器不支持要检测的音频文件");
        }
    </script>

获取当前播放时间位置：

  <audio id="myAudio" controls src="./source/银临 - 【插曲】意难平.flac" autoplay muted loop preload='metadata'></audio>
    <button id="current">currentTime</button>
    <script>
        var myAudio = document.getElementById('myAudio');
        current.onclick = function() {
            console.log(myAudio.currentTime);
        }
    </script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <audio id="myAudio" controls src="./source/银临 - 【插曲】意难平.flac" autoplay muted loop preload='metadata'></audio>
    <button id="current">currentTime</button>
    <button id="lessVolume">-</button>
    <button id="addVolume">+</button>
    <button id="q">快进</button>
    <button id="s">放慢</button>
    <button id="p">play/pause</button>
    <button id="btn">btn</button>
    <script>
        myAudio.onplay = function() {
            console.log("开始播放啦！");
        }
        myAudio.onpause = function() {
            console.log("暂停了哦！");
        }
        myAudio.ended = function() {
            console.log("结束啦，可以自动播放下一首歌了！");
        }
    </script>
    <script>
        var myAudio = document.getElementById('myAudio');
        //当前播放位置的时间
        current.onclick = function() {
                console.log(myAudio.currentTime);
            }
            //放慢倍速
        s.onclick = function() {
                myAudio.playbackRate -= 0.1;
            }
            //快进倍速
        q.onclick = function() {
                myAudio.playbackRate += 0.1;
            }
            //音量降低
        lessVolume.onclick = function() {
                var volume = parseInt((myAudio.volume - 0.1) * 10) / 10;
                if (volume >= 0 && volume <= 1) {
                    myAudio.volume = volume;
                }
                console.log(myAudio.volume);
            }
            //增加音量
        addVolume.onclick = function() {
                var volume = parseInt((myAudio.volume + 0.1) * 10) / 10;
                if (volume >= 0 && volume <= 1) {
                    myAudio.volume = volume;
                }
                console.log(myAudio.volume);
            }
            //暂停和继续播放状态切换
        p.onclick = function() {
                if (myAudio.paused) {
                    myAudio.play();
                } else {
                    myAudio.pause();
                }
            }
            //重新加载
        btn.onclick = function() {
            myAudio.load();
        }
    </script>
</body>

</html>

效果：

我本浪人--游吟世间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
audio/video媒体

基本使用：<audio src="./source/song.mp3"></audio><video src="./source/video.mp4“ poster></video>var audio = new Audio(‘song.mp3’);var audio = document.createElement(‘audio’...
复制链接

扫一扫