1.布局：Boostrap里的响应式和自适应布局是自然跑不掉的，container中嵌套row再分别嵌套aside和main（H5新标签）和div(id="musicConsole")。aside是左侧的音乐列表，main是右边的歌词显示框，div是下面的控件框。

2.主要实现功能：

　　(1)添加歌曲（歌曲列表右上角的“+”图标）和删除歌曲（歌曲列表右上角的“垃圾箱”图标）

　　(2)点击歌曲列表中的歌曲：会播放对于曲目；如果有歌词，则滚动显示歌词，如果没有歌词则显示“没有歌词”；进度条和时间会随着歌曲的播放而变化。

　　(3)点击上一首按钮（竖线+三角形），会播放上一首歌曲：如果有歌词，则滚动显示歌词，如果没有歌词则显示“没有歌词”；进度条和时间会随着歌曲的播放而变化。

　　　 点击播放按钮（三角形），会变为暂停按钮（双竖线），歌曲也相应的由播放状态变为暂停状态。

　　　 点击下一首按钮（三角形+竖线），会播放下一首歌曲：如果有歌词，则滚动显示歌词，如果没有歌词则显示“没有歌词”；进度条和时间会随着歌曲的播放而变化。

　　　 点击音响按钮（喇叭），会变为静音按钮（喇叭+"x"），歌曲也相应的变为静音状态。

　　　 点击循环按钮（带箭头的圈），会变为单次播放，保持循环按钮，则会重复单曲循环。

3.遇到的问题：

　　（1）glyphicon的大小用font-size改变

　　　　 因为用到Boostrap的图标，默认的大小太小了，试了一下width和height没反应，才反应过来，是用font-size来改变大小的

　　（2）str.replace(oldStr,newStr)

　　　　点击播放按钮时，会改变播放状态，相应的也要改变按钮的图标，所以用到了replace，搞了半天都没有反应，结果发现是因为它是重新生成一个字符串，不是直接在原串上面改，orz

　　（3）浏览器因为安全考虑，很难读取本地文件