多媒体

最新推荐文章于 2024-01-04 16:36:26 发布

爱睡的虫虫

最新推荐文章于 2024-01-04 16:36:26 发布

阅读量625

点赞数 2

CC 4.0 BY-SA版权

分类专栏：移动端开发 HTML5 文章标签： audio 音频

本文链接：https://blog.youkuaiyun.com/feifanzhuli/article/details/90489968

移动端开发同时被 2 个专栏收录

16 篇文章

订阅专栏

HTML5

11 篇文章

订阅专栏

audio

该标签往页面插入音频标签

语法

 <audio src="song.mp3" controls loop autoplay>浏览器不支持audio标签</audio>

浏览器对音频的兼容性

浏览器	版本	支持格式
Internet Explorer	9.0+	MP3, AAC
Chrome	6.0+	Ogg Vorbis, MP3, WAV（9.0+）
Firefox	3.6+	Ogg Vorbis, WAV
Safari	5.0+	MP3, AAC, WAV
Opera	10.0+	Ogg Vorbis, WAV

大约有80%的浏览器支持HTML5的audio标签，但是并没有一种统一的音频格式。从支持的格式来看，要让所有的浏览器可以播放audio元素上的音频，最佳的方式是提供MP3和Ogg两种格式，兼容代码如下：

	<!--拥有两份源文件的音频播放器-->
    <audio controls>
       <source src="horse.ogg" type="audio/ogg">
       <source src="horse.mp3" type="audio/mpeg">
    </audio>

video

该标签往页面插入视频标签

 <video src="song.mp3" controls loop autoplay>浏览器不支持audio标签</vide>

视频的兼容性

浏览器	版本	支持格式
Internet Explorer	9.0+	MP4
Chrome	6.0+	MP4,WebM,Ogg
Firefox	3.6+	WebM,Ogg
Safari	5.0+	MP4
Opera	10.0+	WebM,Ogg

从浏览器支持的视频格式来看，最佳的方式是提供WebM和MP4两种格式的视频。兼容代码如下：

<video width="320" height="240" controls>    
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.ogg" type="video.ogg">
    <!—向后兼容代码: -->      
    <iframe width="480" height="360" src="文件路径" frameborder="0" allowfullscreen></iframe>  
</video>

音频和视频共同享有属性和方法。

属性

名称	说明
src	歌曲的路径
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
loop	设置或返回音频/视频是否应在结束时重新播放
autoplay	当歌曲加载后自动播放，但是只有pc端可以实现,移动端不行
currentTime	指示音频/视频播放的当前位置（以秒计）
playbackRate	设置或返回音频/视频播放的速度 // 1.0 正常速度/0.5 半速（更慢）/2.0 倍速（更快）
duration	返回当前音频/视频的长度（以秒计）
ended	返回音频/视频的播放是否已结束 true(结束)，false(未结束)
muted	设置或返回音频/视频是否静音设置 true(正常)，false(静音）
paused	返回音频/视频是否暂停设置 true(暂停) ，false（播放）
volume	设置或返回音频/视频的音量默认：1

方法

名称	说明
音频元素.load()	重新加载音频/视频元素
音频元素.play()	开始播放音频/视频
音频元素.pause()	暂停当前播放的音频/视频

事件

名称	说明
oncanplaythrough	当视频加载完成正常播放时执行
ended	当目前的播放列表结束以后
ontimeupdate	当目前的播放位置更改时

实例：

<!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>
    <link rel="stylesheet" href="css/style.min.css">
    <script src="js/flexible.js"></script>
</head>

<body>
    <div class="container">
        <div class="banner">
            <video width="100%" height="350" src="mp3/风中的节奏.mp4" autoplay controls></video>
        </div>
        <div class="duration"></div>
        <div class="controls">
            <p>快退</p>
            <p>上一个</p>
            <p>播放</p>
            <p>下一个</p>
            <p>快进</p>
            <p>x2</p>
            <p>静音</p>
        </div>
    </div>

    <script>
        // 获取到视频标签 dom
        let v = document.querySelector("video");

        let sum = [
            { "url": "mp3/a.mp4" },
            { "url": "mp3/video.mp4" },
            { "url": "mp3/b.mp4" },
            { "url": "mp3/音乐节.mp4" },
            { "url": "mp3/风中的节奏.mp4" }
        ];
        let index = 0;
        let time = 0;
        console.log(v.ended);
        

        // 当视频加载完成正常播放时执行
        v.oncanplaythrough = function () {
            // duration 文件总时长
            v.ontimeupdate = function () {
                let sum = Math.floor(v.duration);//总时长
                let start = Math.floor(v.currentTime); //当前位置
                time = start;
                document.querySelector(".duration").innerHTML = `${start}/${sum}`;
                console.log(v.ended);
            }

        }

        document.querySelector(".controls").onclick = function (e = event) {
            var ele = e.target || e.srcElement;
            // e.preventDefault();
            if (ele.innerHTML == "快退") {
                //点击快退了！
                v.currentTime = time - 3;
            } else if (ele.innerHTML == "上一个") {
                //点击上一个了！
                index--;
                index = index < 0 ? sum.length - 1 : index;
                v.src = sum[index].url;
                if (!v.paused) {
                    v.play();
                } else {
                    v.pause();
                }
            } else if (ele.innerHTML == "播放" || ele.innerHTML == "暂停") {
                console.log(v.paused);
                
                //点击上一个了！
                if (v.paused) {
                    v.play();
                    ele.innerHTML = "暂停";
                } else {
                    v.pause();
                    ele.innerHTML = "播放";
                }
            } else if (ele.innerHTML === "下一个") {
                //点击上一个了！
                index++;
                index = index > sum.length - 1 ? 0 : index;
                v.src = sum[index].url;
                if (v.paused) {
                    v.pause();
                } else {
                    v.play();
                }

            } else if (ele.innerHTML === "快进") {
                //点击上一个了！
                v.currentTime = time + 3
            }
            else if (ele.innerHTML === "静音" || ele.innerHTML === "音量") {
                //点击上一个了！
                if (ele.innerHTML === "静音") {
                    v.muted = true;
                    ele.innerHTML = "音量";
                } else {
                    v.muted = false;
                    ele.innerHTML = "静音";
                }

            }
            else if (ele.innerHTML === "x2" || ele.innerHTML === "x1") {
                //点击上一个了！
                if (ele.innerHTML === "x2") {
                    v.playbackRate = 2;
                    ele.innerHTML = "x1";
                } else {
                    v.playbackRate = 1;
                    ele.innerHTML = "x2";
                }
            }
        }
    </script>
</body>

</html>