HTML5音频|学习笔记

简介: 快速学习HTML5音频

发者学堂课程【HTML5 新特性学习HTML5音频习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/396/detail/5046


HTML5音频


内容介绍:

一、音频

二、示例


一、音频

1、Audio (音频)

HTML5提供了播放音频文件的标准

2、control(控制器)

control 属性供添加播放、暂停和音量控件

3、标签:

<audio>  定义声音

<source> 规定多媒体资源,可以是多个


二、示例

使用 WebStorm 集成开发环境做示例

<audio> 标签

新建一个文件 index,在 <title><title> 中间写入 音频,创建一个新的文件夹 raw,存放桌面上一个 MP4 格式的声音文件

<! DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>音频</title>

</head>

<body>

<audio src= “raw/3.mp4” controls= “controls”>浏览器不支持</audio>

</body>

</html>

使用 Chrome 来进行测试

<source>标签

有些浏览器不支持该格式,而是支持 ogg,但是如果两个格式全部放进去无论任何浏览器都可以播放

将该音频的另一个格式 ogg 存入文件夹 raw 下,编写

<audio controls= “controls”>

<source src = “raw/3.mp4”>

<source src = “raw/3.ogg”>

</audio>

测试浏览器 Firefox 也可以播放

相关文章
|
2月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
39 3
|
2月前
|
Web App开发 移动开发 JavaScript
HTML 音频(Audio)详解
HTML5通过`&lt;audio&gt;`元素为网页音频播放提供了丰富支持。本文将介绍其基本用法、属性(如`controls`、`autoplay`)、事件监听、格式兼容性(MP3、OGG、WAV、AAC),并提供JavaScript控制示例。此外,还将讨论优化技巧,如使用CDN、懒加载及提升用户体验的方法。
|
3月前
|
移动开发 JavaScript 前端开发
HTML5 Audio(音频)详解
HTML5 通过 `&lt;audio&gt;` 标签简化了网页音频嵌入。本文详细介绍其基本语法与常用属性(如 `controls`、`autoplay`),并通过示例代码展示如何使用 JavaScript 控制音频播放及处理音频事件。此外,还提供了关于浏览器兼容性、自适应设计及无障碍访问的注意事项,助您优化音频体验。
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
5月前
|
Web App开发 移动开发 HTML5
文本,兼容性-----HTML5新增音频和视频标签
文本,兼容性-----HTML5新增音频和视频标签
|
7月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
67 0
webgl学习笔记3_javascript的HTML DOM
|
7月前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
92 0
|
7月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 030 HTML音频
编程笔记 html5&css&js 030 HTML音频
|
前端开发 UED 容器
|
前端开发
[HTML]HTML学习笔记(四)
[HTML]HTML学习笔记(四)