> 文章列表 > 通过案例来了解响应式开发的音频控件

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

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

目录

前言

一、视频控件的使用方法

1.语法

2、部分功能介绍

 二、案例举例

三、播放效果


前言

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

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

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

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

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


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

一、视频控件的使用方法

1.语法

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

需要说明的文字
</aud1o>

2、部分功能介绍

HTML5嵌入的音频格式
属性名称 参数说明
OggVorbis Ogg格式音频文件的音质、体积大小优于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本地音频播放的代码,这是一个本地音频资源。

三、播放效果

运行如下,仅供参考: