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

作者：归子莫

2022 年 1 月 24 日
本文字数：1801 字
阅读完需：约 6 分钟

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

引言

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

HTML5 音频的播放方式

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

使用插件

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

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

embed 方式

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

例如

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

复制代码

效果

缺陷

embed 标签在 HTML 4 中是无效的，因为它是 HTML5 新出的标签
依赖浏览器的支持
依赖插件的安装

obejct 方式

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

例如

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

复制代码

效果

缺陷

依赖浏览器的支持
依赖插件的安装

audio 方式

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

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

复制代码

效果

缺陷

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 一致！

audio 标签

audio 的属性

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

audio 的事件

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

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

来一个音频播放器的案例

讲了那么多，不就是等一个案例吗，来！

码上！

<!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）
幸好我在，感谢你来！

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/6266e2c18848a39a3a559f34e】。文章转载请联系作者。

归子莫

关注

笔杆揭不起，绘写不出青烟别春泥！ 2022.01.12 加入

信息安全工程师，现职前端工程师的全栈开发，三年全栈经验。专究于前后端开发基础与实战方向，偶尔的兴趣是安全方向，现在在学习前端3D与VR方向。微信公众号：归子莫。甚至全网可搜归子莫！

发布

暂无评论

创作场景

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

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

引言

HTML5 音频的播放方式

使用插件

embed 方式

obejct 方式

audio 方式

最好的解决方案

audio 标签

audio 的属性

audio 的事件

来一个音频播放器的案例

总结

博客说明与致谢

归子莫

评论