【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )

韩曙亮

发布于 2023-04-24 11:27:31

8.3K0

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、HTML5 多媒体标签

传统 HTML 开发中 , 如果想要向网页中嵌入音频和视频 , 需要使用 Flash 浏览器插件才能实现 ;

在 HTML5 中 , 使用多媒体标签 , 即可实现向浏览器中插入音视频 , 多媒体标签如下 :

音频标签 : <audio>
视频标签 : <video>

二、音频标签

HTML 5 的 <audio> 音频标签 , 支持 ogg / mp3 / wav 三种格式的音频 , 不同的浏览器支持的音频格式不同 ;

IE9 : mp3 ;
Firefox 3.5 : ogg / wav ;
Opera 10.5 : ogg / wav ;
Chrome 3.0 : ogg / mp3 ;
Safari 3.0 : mp3 / wav ;

可以在 <audio> 音频标签中放 ogg 和 mp3 两种格式的标签 , 所有的浏览器都可以播放音频 ;

audio 标签常用属性 :

src 属性 : 设置 url 值 , 要播放的音频路径 ;
autoplay 属性 : 值为 autoplay , 表示音频文件加载就绪后 , 马上播放 ;
- Chrome 浏览器不能自动播放 ;
- IE 等其它浏览器可以自动播放 ;
controls 属性 : 值为 controls , 在网页中显示操作控件 , 如 : 播放 / 暂停 / 停止 / 进度条 / 音量控制等按钮 ;
- 不同的播放器 , 显示的操作空间是不同的 , 风格无法做到统一 ;
loop 属性 : 值为 loop , 音频循环播放 ;
- 设置 loop="loop" 就会循环播放 ;

三、音频标签代码示例 ( 默认操作 )

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 多媒体标签 - 音频标签示例</title>
    <style>

    </style>
</head>

<body>
    <audio src="media/snow.mp3" controls="controls"></audio>
</body>

</html>

显示效果 :

进入后默认样式 :

点击播放后 , 标签右侧显示播放图标 :

四、音频标签代码示例 ( 插入 mp3 / ogg 两种格式的音频 )

浏览器加载页面 , 发现 audio 标签 , 读取该 audio 标签 , 发现

第一个 source 字标签配置 mp3 音频文件 ;
- 如果浏览器支持 mp3 就播放该 mp3 文件 ;
- 如果不支持 mp3 格式 , 则继续读取下一行 ;
第二个 source 标签配置的是 ogg 格式的音频文件 ;
- 如果浏览器支持 ogg 就播放该 ogg 文件 ;
- 如果不支持 ogg 格式 , 则继续读取下一行 ;
第三个 source 标签配置的是 wav 格式的音频文件 ;
- 如果浏览器支持 wav 就播放该 wav 文件 ;
- 如果不支持 wav 格式 , 则继续读取下一行 , 显示提示信息 ;

如果浏览器的版本太低 , 如 IE 6 / 7 / 8 , 则显示 很抱歉 , 当前浏览器不支持现有音频格式 ~ ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 多媒体标签 - 音频标签示例</title>
    <style>

    </style>
</head>

<body>
    <!-- 浏览器加载页面 , 发现 audio 标签
         读取该 audio 标签 , 发现第一个 source 字标签 , 该标签配置 mp3 音频文件
          - 如果浏览器支持 mp3 就播放该 mp3 文件
          - 如果不支持 mp3 格式 , 则继续读取下一行 
         第二个 source 标签配置的是 ogg 格式的音频文件 
          - 如果浏览器支持 ogg 就播放该 ogg 文件
          - 如果不支持 ogg 格式 , 则继续读取下一行  
         第二个 source 标签配置的是 wav 格式的音频文件 
          - 如果浏览器支持 wav 就播放该 wav 文件
          - 如果不支持 wav 格式 , 则继续读取下一行 , 显示提示信息 -->
    <audio controls="controls">
        <source src="media/snow.mp3" type="audio/mpeg" />
        <source src="media/snow.ogg" type="audio/ogg" />
        <source src="media/snow.wav" type="audio/wav" />
        很抱歉 , 当前浏览器不支持现有音频格式 ~
    </audio>
</body>

</html>

显示效果 :