html音乐播放器标签,标签HTML5音乐播放器

标签：用于在文档中表示音频内容。利用它，你能够在你的我的网站上放一首你喜欢的歌。chrome

用法很简单，跟标签同样，属性src指定音频文件地址。浏览器

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

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

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

( 你们都叫我：IE8 )网站

为了方便咱们对音频文件进行控制，操做它的进度、播放暂停、音量等等，咱们能够给它添加controls属性：spa

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

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

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

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

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

跟标签同样，标签也有一个字标签：。

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

注：主流的音频文件格式有：mp三、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属性赋合理的值或者作一些运算，来改变音频的音量。