• 技术文章 >web前端 >前端问答

    html5中使用什么标签嵌入音频

    WBOYWBOY2022-09-14 17:06:01原创979

    在html5中,可以使用audio标签嵌入音频;该标签的作用就是定义声音,比如音乐或者其他声音流,并且该标签仅支持MP3、Wav和Ogg三种声音格式,语法为“<audio src="音频文件">”。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows10系统、html5版本、Dell G3电脑。

    html5中使用什么标签嵌入音频

    html5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签,而嵌入音频可以使用 <audio> 标签

    这两个标签都是 html 5 中新增的标签,两个标签中的属性和方法也很类似,但也有些不同。其中 audio 元素用于定义声音,比如音乐, video 元素用于定义视频,如电影等。

    向网页中嵌入音频

    向网页中嵌入音频可以使用 <audio> 标签,此标签的使用和 <video> 标签类似。插入视频是有画面的,我们也可以调整视频的宽和高等,而插入音频是没有画面的。

    <audio> 标签定义声音,比如音乐或其他音频流。

    目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。

    audio 元素支持的格式和 video 元素也有一点区别:

    17.png

    向网页中嵌入音频时,也可以通过 <source> 标签来指定两个源文件,<source> 标签允许规定两个视频或者音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

    audio 元素中的常用属性和 video 元素差不多,但是 audio 元素中没有 width、height 等属性。

    常用属性如下所示:

    18.png

    示例:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>123</title> 
    </head>
    <body>
    <audio controls>
      <source src="horse.mp3" type="audio/mpeg">
      <source src="horse.ogg" type="audio/ogg">
      <embed height="50" width="100" src="horse.mp3">
    </audio>
    </body>
    </html>

    输出结果:

    19.png

    (学习视频分享:css视频教程html视频教程

    以上就是html5中使用什么标签嵌入音频的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:html5
    上一篇:animate.css是什么意思 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• html5中marquee标签怎么用• HTML5里什么是导航标签• html5中preload是什么意思• html5中main的意思是什么• html5的概念是什么时候提出的
    1/1

    PHP中文网