通过案例来了解响应式开发的音频控件

news2024/11/18 5:43:58

目录

前言

一、视频控件的使用方法

1.语法

2、部分功能介绍

 二、案例举例

三、播放效果


前言

1.本文讲解的响应式开发技术(HTML5+CSS3+Bootstrap)的HTML5表单等功能方法的代码,这也是很多教材的一个典型案例;

2.本文将讲解涉及到HTML5表单等功能方法的知识点,其它方面会大致讲一下;

3.本代码是使用visual Studio Code编写的,其他软件如DW,HBX等都是可以的;

4.运行浏览器是谷歌,同时推荐使用谷歌浏览器;

5.这个案例是我上学跟老师所讲做出来的,有些地方不是很完美,请见谅也请多赐教;


提示:以下是本篇文章正文内容,下面案例可供参考

一、视频控件的使用方法

1.语法

<audio src="音频文件路径” controls>

需要说明的文字
</aud1o>

2、部分功能介绍

HTML5嵌入的音频格式
属性名称参数说明
OggVorbisOgg格式音频文件的音质、体积大小优于MP3音频格式。其音频文件格式表示方式为audio/ogg
MP3全称是动态影像专家压缩标准音频层面3,简称为MP3。它被用来大幅度地降低音频数据量,其音频文件格式表示方式为audio/mp3
WAV数据本身的格式为PCM或压缩型,属于无损音乐格与视频的一种。其音频文件格式表示方式为audio/wavo

 二、案例举例

代码如下,仅供参考:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <video src="audio/白狐.mp3" controls>
    这是一个简单的播放音频控件
  </video>
</body>

</html>

以上便是video本地音频播放的代码,这是一个本地音频资源。

三、播放效果

运行如下,仅供参考:

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

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

相关文章

IMX6ULL裸机篇之中断实验-通用中断驱动说明二

一. 通用中断驱动 本文是 IMX6ULL 裸机篇---中断实验。旨在用 C 语言编写一套简单的中断驱动框架代码。 在 start.S 文件中&#xff0c;我们在中断服务函数 IRQ_Handler 中调用了 C 函数 system_irqhandler 来处 理具体的中断。 本实验会认识中断控制器&#xff1a;…

RT-DETR论文学习笔记(DETRs Beat YOLOs on Real-time Object Detection)

论文地址&#xff1a;https://arxiv.org/abs/2304.08069 代码地址&#xff1a;GitHub - PaddlePaddle/PaddleDetection: Object Detection toolkit based on PaddlePaddle. It supports object detection, instance segmentation, multiple object tracking and real-time mult…

完美解决丨ValueError: time data ‘2018/12/24‘ does not match format ‘%Y/%m/%d‘

这里我选择的是&#xff1a; python from datetime import datetime date datetime.strptime(2018/12/24, %Y/%m/%d) 如果你可以执行这段代码&#xff0c;那么你可能会收到这样的报错&#xff1a; python Traceback (most recent call last): File "C:\Users\Administra…

机器学习中最基本的概念之一:数据集、样本、特征和标签

本文重点 数据集、样本、特征和标签是机器学习中的重要概念,这些概念在机器学习算法的设计和实现过程中起着至关重要的作用。在本文中,我们将对这些概念进行详细的讲解,以便更好地理解机器学习算法的基本原理和应用。 一、数据集 数据集是机器学习中最基本的概念之一,它…

VUE3 取Slot元素方法

VUE3 取Slot元素方法 话说前面,这方法诡异的很…尽量不要用. 我这里要实现一个对slot元素进行方法拓展的事情 就比如说我要给一个元素添加自定义拖放事件,正常来说大概是这样的 //vue3 <template><div class"custom" ref"el"><slot> …

Visual Instruction Tuning: 用LLaVA近似多模态GPT-4

©Paperweekly 原创 作者 | Chunyuan Li 使用 GPT-4 进行视觉指令学习&#xff01;Visual Instruction Tuning with GPT-4! ▲ Generated by GLIGEN (https://gligen.github.io/): A cute lava llama and glasses 我们分享了 LLaVA (Language-and-Vision Assistant)&#…

linux工具gcc/g++/gdb/git的使用

目录 gcc/g 基本概念 指令集 函数库 &#xff08;重要&#xff09; gdb使用 基本概念 指令集 项目自动化构建工具make/makefile 进度条小程序 ​编辑 git三板斧 创建仓库 git add git commit git push git status git log gcc/g 基本概念 gcc/g称为编译器…

集合详解之(五)Map集合

文章目录 &#x1f412;个人主页&#x1f3c5;JavaSE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;Map集合的介绍&#x1fa85;如何保证键的不重复性&#xff1f;&#xff08;equals()与hashCode()方法的联用&#xff09;&#x1f380;HashMap集合及常用方法&#x1f38…

电能计量自动化系统在用电管理上的应用

【摘要】&#xff1a;电能计量自动化系统在用电管理上的应用&#xff0c;不仅能够实现远程自动抄表&#xff0c;减少企业在人力资源成本上的投入&#xff0c;切实地维护企业的核心利益&#xff0c;创造出更多的经济效益。还能够通过装置在线监测与配网防窥电功能实现对电能计量…

D. Tokitsukaze, CSL and Stone Game(博弈)

Problem - D - Codeforces 时津风和CSL正在玩一个石头的小游戏。 一开始&#xff0c;有n个石子堆&#xff0c;其中第ii堆有aiai石子。两位玩家轮流走棋。时津风先走。每一回合&#xff0c;棋手选择一个非空的棋堆&#xff0c;并从该棋堆中准确地取出一块石头。如果在轮到他之前…

2 路 500MSPS/1GSPS/1.25GSPS 14 位直流耦合 AD 采集 FMC 子卡模块

板卡概述 FMC155 是一款基于 VITA57.1 标准的&#xff0c;实现 2 路 14-bit、 500MSPS/1GSPS/1.25GSPS 直流耦合 ADC 同步采集 FMC 子卡模 块。该模块遵循 VITA57.1 规范&#xff0c;可直接与 FPGA 载卡配合使用&#xff0c;板 卡 ADC 器件采用 ADI 的 AD9680 芯片&#xf…

Python每日一练(20230420)

目录 1. 数组逐位判断 &#x1f31f; 2. 交错字符串 &#x1f31f;&#x1f31f; 3. 二进制求和 &#x1f31f; 4. 四舍六入五成双规则 &#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 J…

12、HOOK原理下

一、去符号和恢复符号 1.1 Stip和 Strip Type解释 strip在iOS中的作用是 剥掉目标文件中一些符号信息和调试信息&#xff0c;使文件变小。dead code strip &#xff1a; 死代码剥离、然后再去链接。那么strip在哪些地方不能起作用呢&#xff1f; 动态库 不能strip全局符号、因…

Windows下使用SSH密钥实现免密登陆Linux服务器

工具&#xff1a; win10、WinSCP 生成ssh密钥&#xff1a; 打开终端&#xff0c;使账号密码登录&#xff0c;输入命令 ssh-keygen -t rsa 会提示密钥存放路径&#xff0c;一般存放在默认路径&#xff0c;直接回车即可&#xff0c;中间会提示输入密码&#xff0c;这里需要注…

工作流自动化和RPA自动化,哪个更适合你?

2018年&#xff0c;一款名为《Overcooked!2》&#xff08;又名“胡闹厨房”、“分手厨房”&#xff09;的多人合作模拟类游戏风靡全球&#xff0c;在游戏中&#xff0c;玩家扮演厨师在充满各种障碍和危险的厨房里准备食材、烹饪、上菜和清理&#xff0c;需要在尽可能短的时间内…

window11开启wsl2

前言 以前玩linux&#xff0c;总是习惯装双系统&#xff0c;其实双系统特别麻烦。wsl现在的功能其实挺强大的&#xff0c;完全可以代替双系统&#xff0c;去完成一些在linux上的环境搭建。这篇文章记录下window11如何开启wsl2功能&#xff0c;并且安装ubuntu系统。 开启wsl2功…

2023自助洗车店系统解决方案共享洗车无人洗车风口

2021年中国汽车保有量预计超6.3亿辆,洗车市场需求巨大,传统洗车投资大、费用贵、成本高耗水大、占地面积大,而自助洗车机占据传统洗车耗水量1/4 ,占地面积1/70 ;节能环保得到政府的大力支持,且结合信息物联技术,实现智能化管理,高效能运营,灵活便捷服务,符合智慧城市发展原则,成…

开放式耳机有什么好处,列举几款性能高的开放式蓝牙耳机

骨传导耳机也称为“不入耳式”耳机&#xff0c;是一种通过颅骨、骨迷路、内耳淋巴液和听神经之间的信号传导&#xff0c;来达到听力保护目的的一种技术。由于它可以开放双耳&#xff0c;所以在跑步、骑行等运动时使用十分安全&#xff0c;可以避免外界的干扰。这种耳机在佩戴时…

AAAI 2023 | 基于Conductance的高效率和高质量的图聚类算法

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; ╱ 作者简介╱ 林隆龙 博士、副教授 目前任职于西南大学计算机与信息科学学院 软件学院。2022年6月于华中科技大学计算机科学与技术学院获博士学位。目前主要研究兴趣包括(时序)社区挖掘、局部聚类、Personaliz…

Altium Designer 20 导出 Gerber 制造文件流程及注意事项

一、导出 Gerber 流程 设置原点&#xff1a;在Edit菜单中选择Origin&#xff0d;Set &#xff08;快捷键E-O-S&#xff09;定好原点&#xff0c;一般放在左下角附近即可。 放置分孔图表&#xff1a;在Place菜单中选择String放置“.Legend”&#xff08;快捷键P-S&#xff09;…