前言

    自从学习了前端就一直在想，能不能利用别人的数据打造一个我自己的音乐播放器，最开始这个想法是想做一个简单的翻译软件，后来用网易云音乐外链，没有搜索功能实在是很不爽，就冒出了这个想法， 查了一下，网上也有做自己的播放器，但是没发现有搜索功能的，只是本地，后来就坚持自己做一个带搜索的音乐播放器。

一、 初识<audio>标签

    在打造自己的音乐播放器之前我们先认识一下<audio>标签,毕竟后面的操作都是与这个标签挂钩，<audio>和<video>标签是H5新增标签，这里我们用<audio>标签。
    我们先看一下<audio>标签有哪些属性和事件，我在网上找了几张图，一目了然。

](http://upload-images.jianshu.io/upload_images/14214683-ad580724dda135fc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)![

](http://upload-images.jianshu.io/upload_images/14214683-c7f07be8ac2dd3f1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)![

二、属性解析

    这里我挑一些常用的给大家简单说下如何使用这些属性。

1

<audio src="音乐链接.mp3" controls></audio>

这就是<audio>的基本使用，如果在页面上写这一行代码就会看到播放器，但是这里显示的播放器，会根据不同的浏览器显示也是各不相同， 显示的效果也不是我们所要的，所以这里我们把controls属性去掉，播放器就是隐藏起来，然后自己写界面。

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

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

1

<audio src="音乐链接.mp3" autoplay></audio>

loop属性：顾名思义，循环播放。

1

<audio src="音乐链接.mp3" loop></audio>

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

1

<audio src="音乐链接.mp3" preload="auto"></audio>

对应的值有3种：
none：默认不加载，等有需要的时候再加载。
metadata：元数据，默认不加载，但是可以提取该音频的元数据信息。
auto：自动加载，网页加载完就加载整个音频。

muted属性：静音效果。

1

<audio src="音乐链接.mp3" muted></audio>

注意：加了muted属性后，音频在播放的时候是没有声音，除非用户手动调整控制面板的音量，一般情况下不加这个。

下面我们介绍下如何用javascrit如何操作这些属性。

1
2

<audio id="music" src="音乐链接.mp3"></audio>
    var music = document.getElementById('music');

控制播放：

1

music.play();//调用play( )方法可以执行播放。

控制暂停：

1

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

获取和设置已播放的时间

1

music.currentTime

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

1	music.currentTime = 10;

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

是否自动播放：

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

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

是否循环播放：

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

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

是否显示控制面板：

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

可以直接在audio标签上加上controls属性，也可以通过JavaScript来设置controls属性。它也是一个布尔值，true代表显示控制面板，false代表隐藏控制面板。我们这里就直接隐藏了，显示的也不是我们想要的东西。

是否静音：

music.muted = true;//静音

可以直接在audio标签上加上muted属性，也可以通过JavaScript来设置muted属性。它也是一个布尔值，true代表静音，false代表有声音。

是否暂停：

music.paused  //是否暂停 

判断音频当前是否暂停，返回true代表暂停，返回false代表正在播放；默认是true；该值只能读取，不能修改。
调用play( )方法后，music.paused的值会变成false；调用pause( )方法后，music.paused的值会变成true。后面我们会用Jquery来控制这两个属性，实现播放和暂停。

调节音量：

m.volume = 0.1;

音量的取值范围在：0（无声）~1（最大声）之间。后面我们会利用其他数值来转换到volume值上面，来对音量进行控制。

后面我会讲到如何写html、css、javascript代码和功能实现，预知详情，请看下一篇，打造自己的音乐播放器（二）。