首页 >web前端 >html教程 >HTML 音频标签

HTML 音频标签

WBOY
WBOY原创
2024-09-04 16:33:471225浏览

HTML 5中引入的HTML音频标签。该标签用于将所有音频文件添加到HTML页面。该音频标签还添加了音频控件,如播放、音量、暂停等。在音频标签 中,元素用于选择浏览器正在选择的替代音频文件,浏览器始终选择第一个识别的格式。我们还可以在

浏览器和允许的格式:

Browsers Formats
  MP3 WAV OGG
Edge/IE YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
浏览器

格式

 

MP3 WAV
File Format Media Type
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav

OGG

边缘/IE

  • Chrome
  • 火狐
  • Safari

    歌剧

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Audio Tag</title>
    <style type="text/css">
    h1
    {
    color: red;
    text-align: center;
    }
    p
    {
    color: green;
    font-size: 20px;
    border: 2px dotted brown;
    }
    </style>
    </head>
    <body>
    <h1>Audio Tag Introduction</h1>
    <p>HTML audio tag introduced in HTML 5. This tag is used to add all
    audio files to the HTML page. This audio tag also adds audio controls
    like play, volume, pause etc. In audio tag source element is used for
    choose alternative audio files which browser is choosing, browser is
    always choose first recognized format. We can also add text between
    audio and /audio tag but it is not performing audio functionality, it
    is just act as plain text.</p>
    <h1>MP3 Audio Demo from online source</h1>
    <audio controls>
    <source
    src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"
    type="audio/mpeg">
    </audio>
    </body>
    </html>

    表> 音频标签在 HTML 中如何工作? HTML 音频的工作原理基于我们给定的音频文件类型以及我们在其中使用的属性。

    HTML 音频标签

    音频格式和媒体类型:

    文件格式

    媒体类型
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Audio Tag</title>
    <style type="text/css">
    h1
    {
    color: green;
    text-align: center;
    }
    p
    {
    color: blue;
    font-size: 20px;
    border: 2px solid orange;
    }
    </style>
    </head>
    <body>
    <h1>Audio Tag Introduction</h1>
    <p>HTML audio tag introduced in HTML 5. This tag is used to add all
    audio files to the HTML page. This audio tag also adds audio controls
    like play, volume, pause etc. In audio tag source element is used for
    choose alternative audio files which browser is choosing, browser is
    always choose first recognized format. We can also add text between
    audio and /audio tag but it is not performing audio functionality, it
    is just act as plain text.</p>
    <h1>WAV Audio Demo from online source</h1>
    <audio controls>
    <source
    src="https://file-examples.com/wp-content/uploads/2017/11/file_example_WAV_1MG.wav"
    type="audio/wav">
    </audio>
    </body>
    </html>
    MP3

    音频/mpeg OGG

    HTML 音频标签音频/ogg

    WAV

    音频/wav

    表> 属性
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Audio Tag</title>
    <style type="text/css">
    h1
    {
    color: blue;
    text-align: center;
    }
    p
    {
    color: fuchsia;
    font-size: 20px;
    border: 2px dashed red;
    }
    </style>
    </head>
    <body>
    <h1>Audio Tag Introduction</h1>
    <p>HTML audio tag introduced in HTML 5. This tag is used to add all
    audio files to the HTML page. This audio tag also adds audio controls
    like play, volume, pause etc. In audio tag source element is used for
    choose alternative audio files which browser is choosing, browser is
    always choose first recognized format. We can also add text between
    audio and /audio tag but it is not performing audio functionality, it
    is just act as plain text.</p>
    <h1>OGG Audio Demo from online source</h1>
    <audio controls autoplay>
    <source
    src="https://file-examples.com/wp-content/uploads/2017/11/file_example_OOG_5MG.ogg"
    type="audio/ogg">
    </audio>
    </body>
    </html>
    它们是音频标签中的不同属性。每个属性都有其要执行的功能。

    以上是HTML 音频标签的详细内容。更多信息请关注PHP中文网其他相关文章!

  • 声明:
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    上一篇:Alt Tag in HTML下一篇:RGB Color Model