600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > audio 上一首 下一首 自定义样式_用audio标签打造一个属于自己的HTML5音乐播放器...

audio 上一首 下一首 自定义样式_用audio标签打造一个属于自己的HTML5音乐播放器...

时间:2021-10-12 05:07:27

相关推荐

audio 上一首 下一首 自定义样式_用audio标签打造一个属于自己的HTML5音乐播放器...

上一章节,我们刚刚讲了标签,今晚,我们讲的是标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如果上一章节你理解了,那么这一节你学起来会:毫无压力。

简介

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

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

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

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

别试了,是你的浏览器渣渣

( 大家都叫我:IE8 )

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

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

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

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

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

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

跟标签一样,标签也有一个字标签:。

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

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

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

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

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

对应的值有3种:

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

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

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

muted属性:静音效果。

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

JavaScript控制音频

JavaScript可以通过video对象控制网页视频;同样可以audio对象操作网页音频。

首先我们通过getElementById(ID)方法获取到一个audio对象。假设id为“music“。

let m= document.getElementById('music');

控制加载:

m.load();//加载

如果你的标签是手动生成的节点,可以用load方法来实现加载。

控制播放:

m.play();//播放

调用play( )方法可以执行播放。

控制暂停:

m.pause();//暂停

调用pause( )方法可以执行暂停播放。

指定播放时间:

m.fastSeek(20);

这样的话,音频会定位到20秒的播放位置。不过目前只有Firefox浏览器支持,你可以通过currentTime属性来实现。

获取和设置已播放的时间

m.currentTime

通过currentTime属性,你可以拿到当前音频播放了多久,返回的数字以( s )秒为单位。

m.currentTime = 10;

你也可以给它赋值,这样,音频会定位到10秒的播放位置。

是否自动播放:

m.autoplay = true;//自动播放

可以直接在标签上加上autoplay属性,也可以通过JavaScript来设置autoplay属性。它是一个布尔值,true代表自动播放,false代表非自动播放。

是否循环播放:

m.loop = true;//循环播放

可以直接在标签上加上loop属性,也可以通过JavaScript来设置loop属性。它也是一个布尔值,true代表循环播放,false代表单曲播放。

是否显示控制面板:

m.controls = true;//显示控制面板

可以直接在标签上加上controls属性,也可以通过JavaScript来设置controls属性。它也是一个布尔值,true代表显示控制面板,false代表隐藏控制面板。

是否静音:

m.muted = true;//静音

可以直接在标签上加上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属性赋合理的值或者做一些运算,来改变音频的音量。

以上就是标签很常用也很实用的一些属性和方法了。只要掌握了这些知识点,你就可以实现一个自己的音乐播放器。当然,标签还有其他属性,我不在这里展开,学习的阶段只要掌握以上这些就够了,有兴趣的同学可以自行去网上搜索

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。