温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html5标记播放音乐的方法是什么

发布时间:2021-12-17 15:34:40 来源:亿速云 阅读:246 作者:iii 栏目:web开发

本篇内容主要讲解“html5标记播放音乐的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html5标记播放音乐的方法是什么”吧!

html5用“<audio>”标记播放音乐。audio标签用于在网页文档中表示音频内容,利用该标签,开发者可以在网站上插入一个音乐播放控件;语法“ <audio src="音频文件地址"></audio>”。

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

html5用“<audio>”标记播放音乐。

<audio>标签:用于在文档中表示音频内容。利用它,你可以在你的个人网站上插入一个音乐播放器,放一首你喜欢的歌。

<audio src="music.mp3"></audio>

html5标记播放音乐的方法是什么

用法很简单,跟<video>标签一样,属性src指定音频文件地址。

如果你仅仅这样写,页面上不会看到有明显的东西,<audio>标签默认是隐藏的。

对于不支持<audio>标签的浏览器,会把标签的文本内容显示出来。

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

html5标记播放音乐的方法是什么

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

    <audio src="m.mp3" controls></audio>

用法跟<video>标签一样。对于加上了controls属性, 不同的浏览器会展示不同样式的控制面板。

html5标记播放音乐的方法是什么

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

html5标记播放音乐的方法是什么

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

html5标记播放音乐的方法是什么

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

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

跟<video>标签一样,<audio>标签也有一个字标签:<source>。

它们的作用和用法都一样,就是用来引入多个音频,浏览器会选择一个支持的音频格式进行加载,对于不支持<audio>标签的浏览器,<source>元素也可以作为浏览器不识别的内容加入到文档中。

    <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属性,音频即使在播放的时候,也是没有声音,除非用户手动调整控制面板的音量。

到此,相信大家对“html5标记播放音乐的方法是什么”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI