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 也可以播放

相关文章
|
11月前
|
Web App开发 移动开发 iOS开发
HTML5 Audio(音频)
HTML5 Audio 标准允许网页直接播放音频文件,无需依赖插件。通过 `&lt;audio&gt;` 标签,开发者可以在网页中嵌入音频,支持多种格式如 MP3、WAV 和 Ogg。主流浏览器如 IE9+、Firefox、Chrome、Safari 和 Opera 均支持此功能,但不同浏览器对音频格式的支持存在差异。使用 `&lt;source&gt;` 标签可指定多个源文件,确保兼容性。
|
12月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
129 3
|
Web App开发 移动开发 JavaScript
HTML 音频(Audio)详解
HTML5通过`&lt;audio&gt;`元素为网页音频播放提供了丰富支持。本文将介绍其基本用法、属性(如`controls`、`autoplay`)、事件监听、格式兼容性(MP3、OGG、WAV、AAC),并提供JavaScript控制示例。此外,还将讨论优化技巧,如使用CDN、懒加载及提升用户体验的方法。
|
移动开发 JavaScript 前端开发
HTML5 Audio(音频)详解
HTML5 通过 `&lt;audio&gt;` 标签简化了网页音频嵌入。本文详细介绍其基本语法与常用属性(如 `controls`、`autoplay`),并通过示例代码展示如何使用 JavaScript 控制音频播放及处理音频事件。此外,还提供了关于浏览器兼容性、自适应设计及无障碍访问的注意事项,助您优化音频体验。
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
前端开发 UED 容器
|
前端开发
[HTML]HTML学习笔记(四)
[HTML]HTML学习笔记(四)
|
Web App开发 移动开发 HTML5
文本,兼容性-----HTML5新增音频和视频标签
文本,兼容性-----HTML5新增音频和视频标签
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
157 0
webgl学习笔记3_javascript的HTML DOM
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 030 HTML音频
编程笔记 html5&css&js 030 HTML音频
136 2

热门文章

最新文章