给自己网页加上背景音乐

咳咳咳 最近发现绿色这首歌还阔以 然后官网上面没音乐 就加上了

HTML5添加网页背景音乐

下面代码使用都插入在网页<haed></haed>之间

方式一:

<video controls="" autoplay="" name="media"><source src="音乐url" type="audio/mpeg"></video>

这种会显示播放器

方式二:

<embed src="音乐url" autostart="true" loop="true" hidden="true"></embed>

这个方式主要是支持的播放器多。一定程度上解决了浏览器兼容的问题。

方式三:

<audio autoplay="" loop=""><source src="音乐rul"></audio>

这种不显示播放器 打开网页后台自动播放 我官网现在用的就是这段

方式四:

<bgsound src=音乐url loop=-1>

这种最简单了

方式五:

<audio src="音乐url" id="aud" autoplay="autoplay" controls="controls" preload="auto"></audio>

<audio>简介

<audio>简单例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html5 音乐播放</title>
</head>
<body>
<center>
    <audio autoplay="autoplay" controls="controls" src="music.mp3" />
你的浏览器不支持audio标签。
        </audio>
    </center>
</body>
</html>

需要说明:

<audio> 标签是 HTML 5 的新标签。IE8之前就不支持了。


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

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

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

如果你仅仅这样写,页面上不会看到有明显的东西,<audio>标签默认是隐藏的。
对于不支持<audio>标签的浏览器,会把标签的文本内容显示出来。
<audio src=”music.mp3″>别试了,是你的浏览器渣渣</audio>
为了方便我们对音频文件进行控制,操作它的进度、播放暂停、音量等等,我们可以给它添加controls属性:
<audio src=”m.mp3″ controls></audio>
用法跟<video>标签一样。对于加上了controls属性, 不同的浏览器会展示不同样式的控制面板。跟<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属性,音频即使在播放的时候,也是没有声音,除非用户手动调整控制面板的音量。


JavaScript控制音频
JavaScript可以通过video对象控制网页视频;同样可以audio对象操作网页音频。
首先我们通过getElementById(ID)方法获取到一个audio对象。假设id为“music“。

<audio id="music" src="m.mp3"></audio>let m = document.getElementById('music');

控制加载:


m.load();//加载
如果你的<audio>标签是手动生成的节点,可以用load方法来实现加载。控制播放:
m.play();//播放
调用play( )方法可以执行播放。
控制暂停:
m.pause();//暂停
调用pause( )方法可以执行暂停播放。
指定播放时间:
m.fastSeek(20);
这样的话,音频会定位到20秒的播放位置。不过目前只有Firefox浏览器支持,你可以通过currentTime属性来实现。
获取和设置已播放的时间
m.currentTime
通过currentTime属性,你可以拿到当前音频播放了多久,返回的数字以( s )秒为单位。
m.currentTime = 10;
你也可以给它赋值,这样,音频会定位到10秒的播放位置。
是否自动播放:
m.autoplay = true;//自动播放
可以直接在<audio>标签上加上autoplay属性,也可以通过JavaScript来设置autoplay属性。它是一个布尔值,true代表自动播放,false代表非自动播放。
是否循环播放:
m.loop = true;//循环播放
可以直接在<audio>标签上加上loop属性,也可以通过JavaScript来设置loop属性。它也是一个布尔值,true代表循环播放,false代表单曲播放。
是否显示控制面板:
m.controls = true;//显示控制面板
可以直接在<audio>标签上加上controls属性,也可以通过JavaScript来设置controls属性。它也是一个布尔值,true代表显示控制面板,false代表隐藏控制面板。
是否静音:
m.muted = true;//静音
可以直接在<audio>标签上加上muted属性,也可以通过JavaScript来设置muted属性。它也是一个布尔值,true代表静音,false代表有声音。
是否暂停:
m.paused //是否暂停
判断音频当前是否暂停,返回true代表暂停,返回false代表正在播放;默认是true;该值只能读取,不能修改。
调用play( )方法后,m.paused的值会变成false;调用pause( )方法后,m.paused的值会变成true。
调节音量:
m.volume = 0.1;
音量的取值范围在:0(无声)~1(最大声)之间。可以对volume属性赋合理的值或者做一些运算,来改变音频的音量。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发