首页 > web前端 > 前端问答 > html5用什么标记播放音乐

html5用什么标记播放音乐

青灯夜游
发布: 2021-12-17 15:29:09
原创
3849 人浏览过

html5用“

html5用什么标记播放音乐

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

html5用“

<audio src="music.mp3"></audio>
登录后复制

2.png

用法很简单,跟

如果你仅仅这样写,页面上不会看到有明显的东西,

对于不支持

    <audio src="music.mp3">
        别试了,是你的浏览器渣渣
    </audio>
登录后复制

1.png

为了方便我们对音频文件进行控制,操作它的进度、播放暂停、音量等等,我们可以给它添加controls属性:

    <audio src="m.mp3" controls></audio>
登录后复制

用法跟

3.png

( chrome浏览器的音频控制面板 )

4.png

( firefox浏览器的音频控制面板 )

5.png

( IE浏览器的音频控制面板 )

哪个好看就见仁见智了~~

它们的作用和用法都一样,就是用来引入多个音频,浏览器会选择一个支持的音频格式进行加载,对于不支持

    <audio>
        <source src="music.mp3">
        <source src="music.ogg">
        <source src="music.wav">
    </audio>
登录后复制

注:主流的音频文件格式有:mp3、wav、ogg。不同的浏览器对三种格式支持程度不一样。其中mp3格式支持度最好。

autoplay属性:加载完成后,自动播放。也非常简单、使用。

 <audio src="m.mp3" autoplay></audio>
登录后复制

loop属性:顾名思义,循环播放。

<audio src="m.mp3" loop></audio>
登录后复制

preload属性:用来控制音频在什么时候进行加载。

 <audio src="m.mp3" preload="auto"></audio>
登录后复制

对应的值有3种:

  • none:默认不加载,等有需要的时候再加载。

  • metadata:元数据,默认不加载,但是可以提取该音频的元数据信息。

  • auto:自动加载,网页加载完就加载整个音频。

muted属性:静音效果。

<audio src="m.mp3" muted></audio>
登录后复制

加了muted属性,音频即使在播放的时候,也是没有声音,除非用户手动调整控制面板的音量。

相关推荐:《html视频教程

以上是html5用什么标记播放音乐的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
HTML与HTML5的区别
来自于 1970-01-01 08:00:00
0
0
0
symfony 2.1 的 html5 校验
来自于 1970-01-01 08:00:00
0
0
0
能不能用html5做一个图片滚动效果
来自于 1970-01-01 08:00:00
0
0
0
javascript - html5显示隐藏
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板