每年过年，不管是大街小巷还是春晚的舞台上，歌曲都是必不可少的，热热闹闹才是年嘛，那今天跟着我一起来用我这个半吊子前端水平开发的简易的手机音乐盒听听那些新年歌曲吧，我是90后所以歌都比较的老，但是越老的歌越有味道嘛，来吧看看这个简易手机音乐盒是怎么实现的。
一.整体效果图
二.实现思路 既然是音乐盒，那当然是播放音乐了，所以得使用音频标签audio，对于图片和css样式层可以采用点击事件触发音乐播放，然后就是得有一个能控制所有播放音乐的总开关，防止全部音乐一起播放。
三.实现分解
1.书签页样式，使用article标签实现，看起来还不错
2.音乐的播放与暂停，页面上一共有五个播放音乐的地方，最上面两个是使用的音频标签audio，所以自带的播放和暂停功能，剩下三个都是自定义的点击播放事件
1)音频标签audio实现
<audio id="music_1" src="music/陈红%20-%20常回家看看hires.flac" controls style="width: 200px;"></audio> 复制代码
2)自定义实现，给css或者image添加点击事件，单击就是播放，双击就是暂停
$(document).on('click',".ai-fire",function (e){ play(); }); // 检查是否正在播放 var isPlaying = false; function play() { var player = document.querySelector('#fire'); if (isPlaying) { // 如果正在播放, 停止播放并停止读取此音乐文件 player.pause(); player.src = ''; } else { player.src = 'music/费翔%20-%20冬天里的一把火.mp3'; player.play(); } } 复制代码
3.页面上一共五个播放音乐的地方，会出现一起播放的情况，那就是大杂烩了，所以得用如下方法防止这种事件触发
// dom操作获取所有的audio标签 var audios = document.getElementsByTagName("audio"); // 暂停函数 function pauseAll() { var self = this; //循环 如果有一个正在使用就暂停其他的 [].forEach.call(audios, function(i) { i !== self && i.pause(); }) } // 给play事件绑定暂停函数 [].forEach.call(audios, function(i) { i.addEventListener("play", pauseAll.bind(i)); }) 复制代码
后话
音乐使人充满活力，让人快乐，愿大家在新的一年里天天开心，快乐。
