【重构前端知识体系之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查阅。

属性 描述
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)

幸好我在,感谢你来!

【重构前端知识体系之HTML】HTML5给网页音频带来的变化的更多相关文章

  1. 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解

    [重构前端知识体系之HTML]讲讲对HTML5的一大特性--语义化的理解 引言 在讲什么是语义化之前,先看看语义化的背景. 在之前的文章中提到HTML最重要的特性,那就是标签.但是项目一大,标签多的看 ...

  2. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  3. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

  4. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  7. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  9. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

随机推荐

  1. C++之去重

    note 今天刷题,忘了去重复库函数,于是手写了一个. 前提: 必须保证数组是有序的. 源码 template <typename T> void unique_arr(T arr[], ...

  2. 【LeetCode】408. Valid Word Abbreviation 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 双指针 日期 题目地址:https://leetcod ...

  3. 【九度OJ】题目1208:10进制 VS 2进制 解题报告

    [九度OJ]题目1208:10进制 VS 2进制 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1208 题目描述: 对于一 ...

  4. 【LeetCode】98. Validate Binary Search Tree 解题报告(Python & C++ & Java)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 BST的中序遍历是有序的 日期 题目地址:ht ...

  5. EXPLAINING AND HARNESSING ADVERSARIAL EXAMPLES

    目录 概 主要内容 从线性谈起 非线性 Goodfellow I, Shlens J, Szegedy C, et al. Explaining and Harnessing Adversarial ...

  6. 【优雅代码】02-java传个方法你会吗,不是Method对象

    [优雅代码]02-java传个方法你会吗,不是Method对象 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮 ...

  7. 编写Java程序,实现从控制台输入对应个数的整数,输出对输入整数的从大到小显示

    编写Java程序,实现从控制台输入对应个数的整数,输出对输入整数的从大到小显示 效果如下: 实现代码: import java.util.Arrays; import java.util.Scanne ...

  8. Android开发布局 案例二

    实践案例: XML <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  9. Hexo博客部署到腾讯云服务器全过程(Nginx,证书,HTTPS),你要的这里都有

    背景 说来也惭愧,博客已经搭建很久了,一直免费的部署在 Coding 和 Github Pages 上,前者迁移到腾讯云 Serverless,导致原有的配置始终有问题,没时间仔细研究,刚好腾讯服务器 ...

  10. 【】Apache Ranger剖析:Hadoop生态圈的安全管家

    前言 2016年,Hadoop迎来了自己十周岁生日.过去的十年,Hadoop雄霸武林盟主之位,号令天下,引领大数据技术生态不断发展壮大,一时间百家争鸣,百花齐放.然而,兄弟多了不好管,为了抢占企业级市 ...