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

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

2024-02-01 12:02:07 前端知识 前端哥 594 650 我要收藏

文章目录

  • 一、HTML5 多媒体标签
  • 二、音频标签
  • 三、音频标签代码示例 ( 默认操作 )
  • 四、音频标签代码示例 ( 插入 mp3 / ogg 两种格式的音频 )





一、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>

显示效果 :

  • 进入后默认样式 :
    在这里插入图片描述
  • 点击播放后 , 标签右侧显示播放图标 :
    在这里插入图片描述
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1018.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!