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

FiiO CP13 cassette player launches with transparent retro lookJun 16, 2024 am 09:52 AM

TheFiiOCP13cassetteplayerwasannouncedinJanuary.Now,FiiOisexpandingitsportfoliowithtwonewmodels-onewitharedfrontandonewithatransparentfront.Thelatternotonlyperfectlymatchestheretrocharmoftheangulardesign,butalso

Soundcore Space One Pro: Anker reveals most expensive over-ear headset to dateJun 26, 2024 pm 03:07 PM

Anker offers both a broad product portfolio, which not only includes various product categories, but also numerous products within each category. Audio products are no exception in this respect, with Anker offering very affordable headsets as well as

Klipsch unveils Flexus Core 300 flagship soundbar with 8K support, 12 speakers and room correctionSep 05, 2024 am 10:16 AM

The Klipsch Flexus Core 300 is the top model in the series and is positioned above the already available Flexus Core 200 in the company's soundbar line-up. According to Klipsch, this is the first soundbar in the world whose sound can be adapted to th

Audio是指什么Dec 25, 2023 pm 03:41 PM

Audio是指声音的波长、频率和强度。它是一种可以被人类听觉系统感知的信号，由物体振动产生。音频通常以波形的方式存在，可以记录、存储、传输和重放。，音频是一种重要的多媒体信息，在各种领域中得到应用。随着数字技术的发展，数字音频已经成为现代音乐制作和广播领域中的主流技术。同时，音频处理和数字化也是现代音频技术的重要方向之一，它们可以改善音质、提高声音清晰度、增强声音表现力等。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

Doogee S punk: Rugged smartphone with powerful speakers, configurable LEDs and 10800 mAh batteryJun 14, 2024 am 09:12 AM

Doogeewillsoonbeofferinganewsmartphonewithauniquesellingpointintheformofalargespeakerontheback.Itisclearlynoticeableandvisuallydominatestheback.Themaximumoutputpowerisspecifiedas4watts,andaccordingtothemanufact

Anker Soundcore Liberty 4 Pro: Premium earbuds with barometer, spatial audio, noise supression and interactive charging caseAug 13, 2024 pm 03:32 PM

Anker is developing new wireless earbuds, the Soundcore Liberty 4 Pro,which are aimed at users who are willing to dig a little deeper into their pockets for powerful features. There are currently no official details on price or availability, but unco

Enco X3i: New wireless headphones from Oppo launch in Europe with ANC and dual driversJun 20, 2024 pm 09:35 PM

Oppo is also launching new, completely wireless headphones on the European market with the Enco X3i.It is still unclear to what extent the launch will also take place in Germany - the background to this are legal problems on the part of the manufactu

See all articles