首页 > 软件开发 > HTML >

HTML5 audio标签的使用方法

来源:互联网 2023-03-16 19:12:47 412

audio标签为html5新标签,其作用是定义声音,今天小编就来分享下audio标签的使用方法,看看它都有哪些作用?JcB办公区 - 实用经验教程分享!

工具/原料

  • Sublime编辑器,浏览器。

方法/步骤

  • 1

    新建一个“audio.html”的html文件。JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

  • 1此文章未经许可获取自百度经验
  • 2

    将音频文件放入“audio.html”文件同一目录下。JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

  • 3

    audio是html5新标签,所以我们填入html5的标准化代码,然后编写一个audio标签,引用同级目录下音频文件,并设置音频播放控件(必须填写)。JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

  • 4

    将“audio.html”文件用浏览器打开,我们就制作好了一个简单播放音频的播放器,点击播放按钮,就会播放出音频。JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

  • 5

    为了格式更加好看和解决有点浏览器不兼容audio问题,我们可以用source引用多个不同格式音频文件,同时在下方写入一段友情提示。JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

  • 6

    下面我们讲解下其他属性值对播放器的影响,autoplay属性为audio标签自动播放属性,当我们设置后,网页刷新后音频就会自动播放,效果如下图。JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

  • 7

    muted将音频设置为静音,默认情况为静音状态。JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

    HTML5 audio标签的使用方法JcB办公区 - 实用经验教程分享!

  • 8

    除了以上属性外,audio的loop属性设置音频的重复播放,preload属性设置音频是否被加载以及如何加载等等。JcB办公区 - 实用经验教程分享!

  • 注意事项

    • 谷歌浏览器不支持audio标签的autoplay自动播放属性。
    • audio更多用法可以查看html5参考手册,以上就是小编的分享,希望能够帮到你!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!JcB办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码