html5如何插入可自动播放的音频(图文)

229 篇文章 9 订阅
93 篇文章 4 订阅

经常浏览网站或者经常进行页面布局的人,应该对页面中的音频,视频不陌生吧,正在学习HTML5的小伙伴,你知道HTML5中怎么插入音频并自动播放吗?这篇文章就和大家一起研究html5中的音频标签以及HTML5插入音频的代码,有一定的参考价值,可以参考一下。

需要面试题点击下面链接查看,有很多:

打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固,你值得拥有(持续更新)

HTML5中的<audio>标签可以插入音频,control属性可以控制音频的播放,暂停,调节音量等。布局时可以根据需要设置音频的长width和高height。

<audio> 与 </audio> 标签里面的内容用于给不支持 audio 标签的浏览器显示的。

插入音频需要用到的相关标签的描述:

<audio> 用来设置声音内容

<source>用于设置音频的资源,一般在 <video> 与 <audio>标签中使用,可以使用多个

注意:在使用<audio>音频标签时,要注意浏览器的兼容性问题,浏览器的兼容性如下如所示:音频标签时,要注意浏览器的兼容性问题,浏览器的兼容性如下如所示:

 

实例示范1:HTML5中怎么插入音频

实例详解:

首先创建一个<audio>标签,用于显示音频内容,然后用<source>标签引入需要插入的音频,src引入文件时要注意文件的路径,具体代码如下:

<audiocontrols>

  <sourcesrc="horse.mp3"type="audio/mpeg">

您的浏览器不支持 audio 元素。

</audio>

效果图:

 

实例示范2:HTML5中怎么插入自动播放的音频

实例描述:

<audio>标签中的autoplay 属性规定一旦视频就绪马上开始播放,如果设置了该属性,视频将自动播放。且所有主流浏览器都支持 autoplay 属性。

HTML5中插入自动播放音频的方法和上面介绍的插入音频的方法一样,只是多加了一个属性,即<audio>标签中的autoplay 属性,它可以实现音频自动播放的效果,具体代码如下:

<audiocontrols autoplay>

  <sourcesrc="horse.mp3"type="audio/mpeg">

  您的浏览器不支持 audio 元素。

</audio>

以上给大家介绍了HTML5中怎么插入音频,以及如何插入可以自动播放的音频,讲解详细,比较容易理解。初学者可以自己动手尝试,找一个音频,将其插入页面。看看你的代码能不能实现自动播放的效果,希望这篇文章对你有所帮助!

  • 3
    点赞
  • 16
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:撸撸猫 设计师:马嘣嘣 返回首页
评论 1

打赏作者

程序员的生活1

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值