html中<audio>标签的使用-html教程-PHP中文网

首页

web前端

html教程

html中<audio>标签的使用

黄舟

Jun 19, 2017 pm 04:31 PM

audiohtml使用标签

在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式：

1.最少的代码

<audio src="song.ogg" controls="controls"></audio>

2.带有不兼容提醒的代码

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

3.尽量兼容浏览器的写法

<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

在HTML5 标准出现以前，程序员无法想使用3499910bf9dac5ae3c52d5ede7383485标签一样，轻松的播放音频文件。HTML5为解决这个问题，提供了一个新的标签b97864c2e0ef2353a16c4d64c7734e92，让程序员无须再大量的使用flash播放音频文件了。

HTML5 b97864c2e0ef2353a16c4d64c7734e92效果图：

HTML5 b97864c2e0ef2353a16c4d64c7734e92源码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML5音频播放器 |HTML5 audio</title> 
</head>
<body style="padding:0px;margin:0px;text-align:center;">
 <audio src="see-you-again.mp3" controls="controls" preload="auto" autoplay="autoplay" loop="loop">
 您浏览器不支持HTML5音频播放器
</audio> 
</body> 
</html>

audio 可脚本控制的特性值：

autoplay 自动播放已经加载的的媒体文件，或查询是否已设置为autoplay

loop 将媒体文件设置为循环播放，或查询是否已设置为loop

currentTime 以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置

controls 显示或者隐藏用户控制界面

volume 在0.0到1.0间设置音量值,或查询当前音量值

muted 设置是否静音

autobuffer 媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性

对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3.幸好Google的chrome都支持。

以上是html中<audio>标签的使用的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

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

HTML标签和HTML属性有什么区别？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未来：进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容，提升SEO和无障碍访问。2)功能化将引入新元素和属性，满足用户需求。3)模块化将支持组件化开发，提高代码复用性。

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

Alt属性的目的是什么？为什么重要？May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分，用于提供图片的替代文本。1.当图片无法加载时，alt属性中的文本会显示，提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本，提高网页的SEO排名。

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

See all articles