零基础HTML入门教程(12)——插入音频audio标签

简介: 我们前几个小结学习了,插入图片,或者插入超链接,那我们这一小结学习一下插入音频audio标签直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。代码演示效果如下我们可以看到使用这个标签后,我们可以页面上面看到一个音频,并且是可以播放的,我们要熟练合理使用这个标签,是为以后网页开发必不可少的因素。

本章目录

1.任务目标

我们前几个小结学习了,插入图片,或者插入超链接,那我们这一小结学习一下插入音频audio标签

2.audio标签

直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

3.任务实操

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <!-- 插入音频,src是音频路径 -->
  <audio src="./20221206_170743.m4a" controls></audio>
</body>
</html>

效果如下

4.小结

我们可以看到使用这个标签后,我们可以页面上面看到一个音频,并且是可以播放的,我们要熟练合理使用这个标签,是为以后网页开发必不可少的因素。

相关文章
|
15天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
36 3
|
15天前
|
存储 移动开发 前端开发
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
42 2
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
33 1
|
1月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
110 0
|
Web App开发 移动开发 前端开发
HTML5实例教程——制作酷炫音频播放器插件
上图便是这个音频播放器的UI界面图,里面还隐藏了一个歌曲的播放列表。整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成,看上去有难度的地方就只有CD和打碟器的制作了,在歌曲播放时CD和打碟器都是具有动画交互效果的,这个在后面的部分会讲解到。点击播放器的CD可以打开播放列表噢~
324 0
HTML5实例教程——制作酷炫音频播放器插件
|
12天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
34 1
[HTML、CSS]细节与使用经验
|
13天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
28 1
[HTML、CSS]知识点