首页 > 软件开发 > HTML >

HTML5音频标签的使用详解

来源:互联网 2023-03-16 19:11:23 290

音频标签audio 是 HTML5中新增的一个标签,使用该标签可以在网页中嵌入一段音频文件,实现文件的播放,该标签的主要属性有 controls | muted | loop| autoplay| srct4p办公区 - 实用经验教程分享!

工具/原料

  • 电脑一台
  • HTML5

方法/步骤

  • 1

    audio>音频标签常用属性: t4p办公区 - 实用经验教程分享!

    controls 显示控件t4p办公区 - 实用经验教程分享!

    muted 预设静音t4p办公区 - 实用经验教程分享!

    autoplay 自动播放t4p办公区 - 实用经验教程分享!

    loop 循环播放 t4p办公区 - 实用经验教程分享!

    src 音频文件路径t4p办公区 - 实用经验教程分享!

    HTML5音频标签的使用详解t4p办公区 - 实用经验教程分享!

  • 2

    新建一个HTML文档,并定义一个简单的audio>标签,t4p办公区 - 实用经验教程分享!

    此刻预览是一个空白的页面t4p办公区 - 实用经验教程分享!

    HTML5音频标签的使用详解t4p办公区 - 实用经验教程分享!

  • 3

    在audio 标签中加入音频播放器的控件属性 controls示例:t4p办公区 - 实用经验教程分享!

    audio src="bird.mp3" controls>t4p办公区 - 实用经验教程分享!

    当浏览器不支持时,此处给出提示t4p办公区 - 实用经验教程分享!

    /audio>t4p办公区 - 实用经验教程分享!

    HTML5音频标签的使用详解t4p办公区 - 实用经验教程分享!

  • 4

    保存以上内容,在浏览器预览效果,该控件的外观会根据浏览器的不同,而现实不同的外观t4p办公区 - 实用经验教程分享!

    HTML5音频标签的使用详解t4p办公区 - 实用经验教程分享!

  • 5

    在audio 标签中加入音频静音属性 muted ,示例:t4p办公区 - 实用经验教程分享!

    audio src="bird.mp3" controls muted>t4p办公区 - 实用经验教程分享!

    当浏览器不支持时,此处给出提示t4p办公区 - 实用经验教程分享!

    /audio>t4p办公区 - 实用经验教程分享!

    HTML5音频标签的使用详解t4p办公区 - 实用经验教程分享!

  • 6

    保存以上内容,并预览,则音频文件在输出播放前,预定义为静音,t4p办公区 - 实用经验教程分享!

    HTML5音频标签的使用详解t4p办公区 - 实用经验教程分享!

  • 6该信息未经授权抓取自百度经验
  • 7

    若是需要,自动播放,则加入属性:autopaly, 示例:t4p办公区 - 实用经验教程分享!

    audio src="bird.mp3" controls muted autoplay>t4p办公区 - 实用经验教程分享!

    当浏览器不支持时,此处给出提示t4p办公区 - 实用经验教程分享!

    /audio>t4p办公区 - 实用经验教程分享!

    HTML5音频标签的使用详解t4p办公区 - 实用经验教程分享!

  • 8

    若是需要,循环播放,则加入属性:loop, 示例:t4p办公区 - 实用经验教程分享!

    audio src="bird.mp3" controls muted autoplay loot4p办公区 - 实用经验教程分享!

    当浏览器不支持时,此处给出提示t4p办公区 - 实用经验教程分享!

    /audio>t4p办公区 - 实用经验教程分享!

    HTML5音频标签的使用详解t4p办公区 - 实用经验教程分享!

  • 注意事项

    • audio标签中的属性为布尔值,需要某个属性直接写入即可
    • 喜欢此经验,请投票和点赞

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


    标签: HTML

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