【重构前端知识体系之HTML】HTML5给网页音频带来的变化

举报
归子莫 发表于 2022/01/24 17:10:38 2022/01/24
【摘要】 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件。然而现在,估计一些年轻的开发者都不用了解flash是啥了。因为HTML5来了,它改变了这一切。

【重构前端知识体系之HTML】HTML5给网页音频带来的变化

引言

音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件。然而现在,估计一些年轻的开发者都不用了解flash是啥了。因为HTML5来了,它改变了这一切。

HTML5音频的播放方式

是的,HTML5带来了不止一种能够播放音频的方式。

使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件可以使用 object 标签 或者 embed 标签添加在页面上。

embed方式

embed定义一个外部的容器,用来装放MP3等音频文件。

例如

<embed height="50" width="100" src="demo.mp3">

效果

image-20220120231414621

缺陷

  • embed标签在 HTML 4 中是无效的,因为它是HTML5新出的标签

  • 依赖浏览器的支持

  • 依赖插件的安装

obejct方式

obejct也可以定义一个外部的容器,用来装放MP3等音频文件。

例如

<object height="50" width="100" src="demo.mp3"></object>

效果

image-20220120231414621

缺陷

  • 依赖浏览器的支持

  • 依赖插件的安装

audio方式

audio标签是HTML5专门为音频出的一个标签。推荐使用!

<audio src="horse.mp3" controls></audio>

效果

image-20220120231347590

缺陷

  • embed标签在 HTML 4 中是无效的,因为它是HTML5新出的标签

  • 依赖浏览器的支持

最好的解决方案

上面讲了三种使用音频的方式,可以将一些结合起来使用。

示例

<audio controls height="100" width="100">
  <source src="demo.mp3" type="audio/mpeg">
  <source src="demo.ogg" type="audio/ogg">
  <embed height="50" width="100" src="demo.mp3">
</audio>

讲解

看到以上用到了三个标签,这样做的好处是audio会尝试用mp3 或 ogg 来播放音频,如果播放失败了,会回退到embed。

效果

显示的效果基本与audio一致!

image-20220120231347590

audio标签

audio的属性

一些常用的audio属性,全局属性在这里就没有列出来来了。更多请到w3school查阅。

属性 描述
autoplay 设置或返回是否在加载完成后随即播放音频/视频
controls 设置或返回音频/视频是否显示控件(比如播放/暂停等)
loop 设置或返回音频/视频是否应在结束时重新播放
muted 设置或返回音频/视频是否静音
preload 设置或返回音频/视频是否应该在页面加载后进行加载
src 设置或返回音频/视频元素的当前来源

audio的事件

事件这是我们用来跟音频发生交互的重要武器。

同样的只给出部分事件,更多请到w3school查阅。

事件 描述
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
canplay 当浏览器可以播放音频/视频时
timeupdate 当目前的播放位置已更改时

来一个音频播放器的案例

讲了那么多,不就是等一个案例吗,来!

码上!

<!doctype html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
    <title>audio音频demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
​
        body {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: "微软雅黑"
        }
​
        h1 {
            width: 100%;
            font-size: 1.5em;
            text-align: center;
            line-height: 3em;
            color: #33942a;
        }
​
        #audio {
            width: 100%;
        }
​
        .control-body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
​
        #control {
            width: 150px;
            height: 150px;
            border-radius: 200px;
            border: none;
            box-shadow: #888 0 0 8px;
        }
​
       
    </style>
​
</head>
​
<body>
    <script>
​
        function play() {
            let audio = document.getElementById("audio");
            if (audio.paused) {
                audio.pasue();
            } else {
                audio.play();
            }
        }
​
    </script>
​
    <h1>audio音频播放demo</h1>
​
    <div class="control-body">
        <button class="control" id="control" onclick="play()">开始</button>
    </div>
​
    <audio id="audio" src="http://96.ierge.cn/15/235/471737.mp3"></audio>
​
    
​
</body>
​
</html>

总结

音频的确在现在的网页中用的十分平常了,使用的的方式也发生了很大的改变。后续写一个关于音频的demo案例!

重构前端知识体系,你要一起吗?

博客说明与致谢

文章所涉及的部分资料来自互联网整理,其中包含自己个人的总结和看法,分享的目的在于共建社区和巩固自己。

引用的资料如有侵权,请联系本人删除!

感谢万能的网络,W3C,菜鸟教程等!

感谢勤劳的自己个人博客GitHub学习GitHub

公众号【归子莫】,小程序【子莫说】

如果你感觉对你有帮助的话,不妨给我点赞鼓励一下,好文记得收藏哟!关注我一起成长!

所属专栏:重构前端知识体系(HTML)

幸好我在,感谢你来!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。