编程笔记 html5cssjs 030 HTML音频

编程笔记 html5&css&js 030 HTML音频

  • 一、`<audio>`元素
  • 二、属性
  • 三、事件
  • 三、使用 CSS 设置样式
  • 练习
  • 小结

有时候网页上也需要嵌入音频。比如播放歌曲或老师讲课的音频等。

一、<audio>元素

<audio> HTML 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源,这些音频资源可以使用 src 属性或者 <source> 元素来进行描述:浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

二、属性

该元素包含全局属性。
autoplay
布尔值属性;声明该属性,音频会尽快自动播放,不会等待整个音频文件下载完成。
备注: 自动播放音频(或有声视频)可能会破坏用户体验,所以应该尽可能避免。如果你一定要提供自动播放功能,你应该加入开关(让用户主动打开自动播放)。然而,如果需要创建一些媒体元素,其播放源由用户在稍后设置,自动播放就会很有用。想了解如果正确使用自动播放,可参见我们的自动播放指南。
controls
如果声明了该属性,浏览器将提供一个包含声音,播放进度,播放暂停的控制面板,让用户可以控制音频的播放。
crossorigin
枚举属性 展示音频资源是否可以通过 CORS 加载。支持 CORS 的资源可以被 元素复用而不污染。可选值如下:
anonymous
在发送跨域请求时不携带验证信息。换句话说,浏览器在发送Origin: HTTP 请求首部时将不携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给予源站信任(也就是说没有设置 Access-Control-Allow-Origin: 响应首部),那么图片就被认为是污染的,它就会被限制使用。
use-credentials
在发送跨域请求时携带验证信息。换句话说,在发送Origin: HTTP 请求首部时将携带 cookie、安全令牌、并且执行 HTTP 基本认证。如果服务器没有给予源站信任(通过设置Access-Control-Allow-Credentials: 响应首部)那么图片就被认为是污染的,它就会被限制使用。在未指定时,资源将不通过 CORS 请求来获取(也就是不发送 Origin:请求首部),以保护 元素中未污染的内容。如果验证失败,它会表现的好像 anonymous 选项是选中的。查看 CORS settings attributes (en-US) 来获取更多信息。
currentTime
读取 currentTime 属性将返回一个双精度浮点值,用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时,currentTime 相对应的,能够被用于改变重播的时间。否则,设置 currentTime 将设置当前的播放位置,并且会自动搜寻到媒体的那个位置,如果媒体目前已经被加载的话。如果音频是以流的形式加载的,并且数据超出了媒体的缓冲区(buffer),user agent 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始,所以设置 currentTime 到一个开始时间之前的时间可能会失败。举个例子,如果音频媒体的时间轴从 12 小时开始,把 currentTime 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前,从而导致错误。getStartDate() 方法能够用于确定媒体时间轴的开始位置。
disableRemotePlayback 实验性
这是一个布尔值,用来禁用在远程设备上进行进度控制的能力。这些设备通过有线(比如 HDMI, DVI)或无线技术(比如 Miracast, Chromecast, DLNA, AirPlay,)来与 web 连接。请参考 this proposed specification 来获取更多信息。
备注: 在 Safari 中,你能使用 x-webkit-airplay=“deny” 作为兜底方案。
duration 只读
这是一个双精度浮点数,指明了音频在时间轴中的持续时间(总长度),以秒为单位。如果元素上没有媒体,或者媒体是不可用的,那么会返回 NaN。如果媒体找不到确切的结尾(比如不确定长度的直播流,网络电台,或者是通过 WebRTC 连接的流),那么这个值将返回 +Infinity。
loop
布尔属性;如果声明该属性,将循环播放音频。
muted
表示是否静音的布尔值。默认值为 false,表示有声音。
preload
枚举属性,让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一:
none: 示意用户可能不会播放该音频,或者服务器希望节省带宽;换句话说,该音频不会被缓存;
metadata: 示意即使用户可能不会播放该音频,但获取元数据 (例如音频长度) 还是有必要的。
auto: 示意用户可能会播放音频;换句话说,如果有必要,整个音频都将被加载,即使用户不期望使用。
空字符串 : 等效于auto属性。不同浏览器会有自己的默认值,规范建议的默认值为 metadata。
备注: autoplay 属性的优先级高于 preload。如果 autoplay 被指定,浏览器将显式地开始下载媒体以供播放。
浏览器并不被强制遵循该属性的规范,该属性只是一个建议与提示。
src
嵌入的音频的 URL。该 URL 应遵从 HTTP access controls (en-US). 这是一个可选属性;你可以在 audio 元素中使用 元素来替代该属性指定嵌入的音频。

三、事件

事件名称	触发时机
audioprocess (en-US)	一个 ScriptProcessorNode 的输入缓冲区已经准备开始处理。
canplay	浏览器已经可以播放媒体,但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾(即预测会在播放时暂停以获取更多的缓冲区内容)
canplaythrough	浏览器预测已经可以在不暂停的前提下将媒体播放到结束。
complete	一个 OfflineAudioContext 的渲染已经中止。
durationchange	duration 属性发生了变化。
emptied (en-US)	媒体置空。举个例子,当一个媒体已经加载(或部分加载)的情况下话调用 load() 方法,这个事件就将被触发。
ended	播放到媒体的结束位置,播放停止。
loadeddata	媒体的第一帧加载完成。
loadedmetadata	元数据加载完成。
pause	播放暂停。
play	播放开始。
playing	因为缺少数据而暂停或延迟的状态结束,播放准备开始。
ratechange (en-US)	播放速度变化。
seeked (en-US)	一次获取 操作结束。
seeking (en-US)	一次获取 操作开始。
stalled (en-US)	用户代理试图获取媒体数据,但数据意外地没有进入。
suspend (en-US)	媒体加载挂起。
timeupdate	由 currentTime 指定的时间更新。
volumechange (en-US)	音量变化。
waiting (en-US)	因为暂时性缺少数据,播放暂停。

使用说明
浏览器对 文件类型 和 音频编码 (en-US) 的支持各有不同,你可以使用内嵌的 元素提供不同的播放源。浏览器会使用第一个它支持的播放源:

<audio controls><source src="myAudio.mp3" type="audio/mpeg" /><source src="myAudio.ogg" type="audio/ogg" /><p>Your browser doesn't support HTML5 audio. Here is a<a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

其他使用说明:
如果你没有声明 controls 属性,音频播放器不会包含浏览器的默认控件。但你可以使用 JavaScript 和 HTMLMediaElement API 创建自己的自定义控件。
为了更精确地控制你的音频内容,HTMLMediaElement 会触发多种不同的 事件 (en-US)。这也提供了一个查看音频获取过程的方式,你可以查看错误或检测什么时候可以开始播放或操作。
你还可以使用 Web Audio API 以从 JavaScript 代码直接生成和操纵音频流,而非流式播放已存在的音频文件。
<audio> 元素不能像 <video> 元素一样附加副标题(subtitle)或说明标题(caption)。更多有用的信息和解决方法参见 Ian Devlin 的 WebVTT and Audio。

三、使用 CSS 设置样式

<audio> 元素没有自带的固有视觉样式,除非如果声明了 controls 属性,则会显示浏览器的默认控件。
默认控件的 display 的默认值为 inline。将该值设为 block 通常会对定位和布局有好处,除非你想将控件放在文本块或类似元素中。你可以使用作用于整个控件的属性来为其设置样式。例如可用 border、border-radius、padding, margin 等等。但你不能设置音频播放器中的单个组件(如改变按钮大小、改变图标或字体等)。控件在不同的浏览器中也有所不同。
如果在跨浏览器中得到一致的外观和体验,你需要创建自定义控件;自定义控件可以根据你的需求任意设置样式,还可以使用 JavaScript 和 HTMLMediaElement API 来设置更多功能。
视频播放器样式基础 (en-US) 提供了一些有用的样式技术,这篇文章围绕 <video> 而写,但大部分都可以用于 <audio>

练习

<!DOCTYPE html>
<html lang="zh-cn"><title>编程笔记 html5&css&js HTML音频</title><meta charset="utf-8" /><style>body {color: cyan;background-color: teal;}.container {width: 500px; /* 设置容器的宽度 */margin: 0 auto; /* 将左右边距设置为自动 */line-height: 2;}</style><body><div class="container"><h1>约翰施特劳斯:蓝色的多瑙河</h1><p>HTML5</p><audio controls="controls"><source src="mp3/TRACK3-蓝色的多瑙河.MP3" type="audio/mpeg" /></audio></div></body>
</html>

小结

直接使用<autdio>元素可能不太满足实际需要,实际使用时还要详细配置或使用第三方提供的插件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/613426.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

寒假刷题第四天

PTA甲级 1017 Queueing at Bank 可以使用小顶堆模拟窗口的情况&#xff0c;一定是最小的时间的窗口先空出来 #include<iostream> #include<algorithm> #include<queue> #include<vector>using namespace std;struct people {int time;int process; …

完全卸载grafana

查看要卸载的包的名字 yum list installed yum remove grafana-enterprise.x86_64 成功

【tensorflowflutterweb】机器学习模型怎样用到前端上(未写完)

书接上回 在上一章 我们谈了怎么根据项目需求构建一个简单的机器学习模型。 ​​​​​​ ​​​​​​【tensorflow&flutter】自己写个机器学习模型用在项目上&#xff1f;-CSDN博客文章浏览阅读852次&#xff0c;点赞22次&#xff0c;收藏15次。【tensorflow&flutter…

【2023 - 探索】博0到博1,游戏新地图的探索日志

【2023 - 探索】博0到博1&#xff0c;游戏新地图的探索日志 写在最前面CSDN探索日志2023的探险 探索日志年终回顾探索 冒险回顾实习6月开始跟着老师做科研年中的一些其他事情9月开始上课开学后11月&#xff0c;读者互动 新年展望新年祝福 写在最前面 2023&#xff0c;我解锁了新…

C语言——结构体类型(二)【结构体内存对齐,结构体数组】

&#x1f4dd;前言&#xff1a; 上一讲结构体类型&#xff08;一&#xff09;中&#xff0c;我们讲述了有关结构体定义&#xff0c;创建&#xff0c;初始化和引用的内容&#xff0c;这一讲&#xff0c;我们进一步学习结构体的相关知识&#xff1a; 1&#xff0c;结构体内存对齐…

腾讯云2024年优惠券领取入口汇总

腾讯云是国内知名的云计算服务提供商&#xff0c;提供了包括云服务器、云数据库、云存储、人工智能等全方位的云服务。为了吸引更多的用户&#xff0c;腾讯云经常会推出各种优惠券&#xff0c;让用户在购买云服务时能够享受到更多的优惠&#xff0c;下面给大家整理汇总最新腾讯…

独享静态代理IP在海外市场调研中的独特优势

独享静态代理IP在海外市场调研中扮演着至关重要的角色&#xff0c;提供了一系列无可比拟的优势。独享静态代理IP的稳定性和可靠性对于长期的市场调研至关重要&#xff0c;它保证了连接的持续性和数据的准确性。通过这些方面的综合优势&#xff0c;独享静态代理IP成为海外市场调…

【华为OD机试真题2023CD卷 JAVAJS】矩阵匹配

华为OD2023(C&D卷)机试题库全覆盖,刷题指南点这里 矩阵匹配 知识点二分查找DFS搜索 时间限制:1s 空间限制:256MB 限定语言:不限 题目描述: 从一个N*M(N<=M)的矩阵中选出N个数,任意两个数字不能在同一行或同一列,求选出来的N个数中第K大的数字的最小值是多少。…

每日一看大模型新闻(2023.11.20)

1.产品发布 1.1长虹&#xff1a;首个基于大模型的智慧家电AI平台 发布日期&#xff1a;2023.11.20 全球首个基于大模型智慧家电AI平台长虹云帆震撼发布&#xff01; 主要内容&#xff1a;长虹智慧AI平台发布会上&#xff0c;发布了全球首个基于大模型的智慧家电AI平台——长…

靜態住宅IP代理詳解(ISP代理)

IP地址如同我們的網路身份證&#xff0c;是我們在互聯網世界中的標識。而在這個廣闊的網路世界中&#xff0c;有一種特殊的IP地址——靜態住宅IP&#xff0c;它就像我們的網路“定居地”。 靜態住宅IP是什麼&#xff1f; 靜態住宅IP&#xff0c;顧名思義&#xff0c;是一種固定…

使用Rider C# Dll工程和Unity工程互相调用、断点方法

总体流程 创建C# Dll工程&#xff0c;生成C#工程Dll 创建Unity工程 Unity调用C#工程的代码 C#工程调用Unity工程的代码 断点方法 创建C# Dll工程&#xff0c;生成C#工程Dll 创建工程 选这个&#xff0c;注意UnityEngineDll这个选项&#xff0c;要选你目标unity版本的Dll…

R语言生物群落(生态)数据统计分析与绘图教程

详情点击链接&#xff1a;R语言生物群落&#xff08;生态&#xff09;数据统计分析与绘图教程 前沿 R 语言作的开源、自由、免费等特点使其广泛应用于生物群落数据统计分析。生物群落数据多样而复杂&#xff0c;涉及众多统计分析方法。 一&#xff1a;R和Rstudio及入门和作…

【数据结构】7大排序最详细

0.前言 接下来进入排序&#xff0c;我们知道在c语言阶段可能就学习过了像冒泡排序&#xff0c;选择排序这种比较简单的排序&#xff0c;那么接下来我们就会学习到更加高级的排序算法。但高级代表着难度的提升&#xff0c;但不用担心&#xff0c;博主会细细来谈&#xff0c;慢慢…

202312 青少年软件编程(C/C++)等级考试试卷(四级)电子学会真题

2023年12月 青少年软件编程&#xff08;C/C&#xff09;等级考试试卷&#xff08;四级&#xff09;电子学会真题 1.移动路线 题目描述 桌子上有一个m行n列的方格矩阵&#xff0c;将每个方格用坐标表示&#xff0c;行坐标从下到上依次递增&#xff0c;列坐标从左至右依次递增…

为什么要做FP独立站?FP独立站有哪些优势?

近年来&#xff0c;跨境电商的商家们面临越来越大的平台政策压力&#xff0c;商家们纷纷把眼光聚焦到独立站上&#xff0c;眼下独立站已经成为出海卖家的标配。 特别是想做FP商品的卖家&#xff0c;相对于亚马逊平台&#xff0c;独立站才是你们的最终出路... 那么&#xff0c;问…

go-zero 如何在任意地方获取yaml中的值

1、config配置文件中新增全局变量 package configimport "github.com/zeromicro/go-zero/rest"type Config struct {rest.RestConfDB struct {DataSource string}Redis struct {Addr stringPassWord stringUserName string}Auth struct {AccessSecret stringAcc…

ROS2学习笔记一:安装及测试

目录 前言 1 ROS2安装与卸载 1.1 安装虚拟机 1.2 ROS2 humble安装 2 ROS2测试 2.1 topic测试 2.2 小海龟测试 2.3 RQT可视化 2.4 占用空间 前言 ROS2的前身是ROS&#xff0c;ROS即机器人操作系统&#xff08;Robot Operating System&#xff09;,ROS为了“提高机器人…

[有固件程序]车载液晶驱动板(RTD2660H)Fondar下载/烧录器工具v3使用说明

液晶屏幕驱动烧录器 FONDAR2IIC使用说明 介绍 RTD2660液晶屏幕FONDAR烧录器&#xff0c;可烧写液晶驱动板的固件程序&#xff0c;简单易上手&#xff0c;适合开发和个人DIY爱好者&#xff0c;更换不同屏幕烧写不同程序&#xff0c;提供固件仅供测试。 软件介绍 请在Windows 10…

Delphi 11.3配置android环境

电脑安装dephi11.3的时候&#xff0c;勾选android sdk&#xff0c;但是软件安装好以后&#xff0c;还有问题 在Delphi—tool —options 里边&#xff0c;Deployment下SDKManager 中&#xff0c;看到SDk里边的感叹号&#xff0c;说明android sdk没有安装好 解决方法有2种 第一种…

一键提取视频文字或者音频

随着科技的进步&#xff0c;视频转文字技术已经变得越来越成熟&#xff0c;这种技术能够将视频中的语音转化为文字&#xff0c;为人们提供了极大的便利。水印云作为一款备受用户喜爱的在线视频转文字工具&#xff0c;凭借其高效、准确、易用的特点&#xff0c;在市场上占据了一…