HTML5音乐播放器（最新升级改造加强版）

最近么，单位里面么老不顺心的，公司一直催要程序员要PHP，然后本宅好不容易推荐了一个，我日嘞，最后待遇变成1.3，吾师最后也同意1.3W，然后还说要考虑。。。

尼玛，4年多5年不到一点的工作经验，前端，后端PHP都会，标准全栈工程师！在支付宝混过1年。。我的领路人兼前端PHP启蒙老师。。。杀人的心都有了，搞得我也想离职了

然后么，我也被搞得没有动力，没有动力。。。最后搞了下面那个。。。。参考了草明的播放器（就是LOW）

https://github.com/YanMr/H5Player

Low的也是不要不要的....

最后这边瞅瞅，那边翻翻，搞了下面这个玩意

这个是偶对上次的那个播放器的升级改造加强版。。。各种改，今天正好闲的蛋疼搞一下。。。

之前的播放器被喷的各种LOW，连个左右切换都没搞好，搞个毛啊！。。。

以及对我没有妹子的同情，到现在还是个单身狗，更有同事调戏我，让我唱

Single dog, single dog, single everyday.

See AV, hit the plane, they're doing all day.

Hey!

Single dog, single dog, why not be a gay?

No more wait,

no more afraid,

make yourself a gay!

。。。没办法，偶是一个有追求的程序员。偶最求的是代码的极致，效果的最佳。。吾孤高，你们不懂我的寂寞！！！

好了吐槽完毕！！！首先吗，先亮一段代码给大家瞅瞅

<div class="Home"><div class="container clearfix"><div class="box HomeHeader"><div class="title"><h1 id="sing-name">On My Own</h1><p></p></div><div class="musicBox clearfix"><div class="MusicPlayBox"><div class="clearfix"><div class="MusicPlayPic"><img src="img/pic/tokyo.jpg" id="MusicPhoto" class="MusicPhoto" /></div><div class="MusicSystem"><h3 id="sing-singer">ルシュカ </h3><p>专辑简介：TVアニメ『東京喰種』のオリジナル・サウンドトラック。アニメ1期『東京喰種』に加え、2期『東京喰種√A』のBGMも収録。BGM全楽曲は、TVドラマ『マルモのおきて』などを手掛けたクリエイター“やまだ豊”が担当。彼のピアノから生まれるその“過激”で“琴線に触れる繊細なメロディー”が、アニメの世界観を増幅させる。《、</p></div></div><div class="MusicPlayCenter"><div class="MusicPlayButton clearfix"> <a id="Playleft" class="glyphicons glyphicons-rewind fl"></a> <a id="PLAY" class="glyphicons glyphicons-play fl"></a> <a id="Playright" class="glyphicons glyphicons-forward fl"></a> <a href="" class="glyphicons glyphicons-volume-up fl"></a><div id="voiceSlider" class="Progress fl" style="margin:13px 0 0 10px;"><div class="pace" style="width: 80%;"></div><a href="javascript:void(0);" style="left: 80%;"></a> </div></div><div class="Progress" id="MusicProgress"><div style="width: 0%;" class="pace"></div><a style="left: 0%;" href="javascript:void(0);"></a> </div><audio id="audio"></audio></div></div><div class="MusicBoxWord"><ul><li>Darkness falls on another day</li><li>And the light just seems so far away</li><li>Am I here all alone</li><li>Because it just feels so cold</li><li>Oh～so cold</li><li>Is there more than what meets the eyes?</li><li>Something higher keeping me alive</li><li>Maybe hope buried deep within</li><li>Here's what needed to began again </li><li>Now I must believe in something I can not see for now</li><li>I am「on my own」</li><li>It's my will with all my might</li><li>To stay strong without a fight</li><li>I'm so lost but not afraid</li><li>I've been broken and raise again</li><li>Don't give up, I've come this far</li><li>Know what's right in my heart</li><li>I'll get back to my home</li><li>And for now I am「on my own」</li><li>It's my will with all my might</li><li>To stay strong without a fight</li><li>I'm so lost but not afraid</li><li>I've been broken and raise again</li><li>Don't give up, I've come this far</li><li>Know what's right in my heart</li><li>I'll get back to my home</li><li>And for now I am「on my own」</li><li>I am on「on my own」</li></ul></div></div><div class="LightList"><ul class="clearfix"><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li><li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li></ul></div></div></div><div class="container clearfix"><div class="Main"></div><div class="Aside"><div class="Wanted"><img src="img/wanted.png" width="100%" /></div></div></div>
</div>

实现申明歌词同步这个问题我有空搞一下。。。没办法，我觉得先要把一首歌听一遍然后一个个time搞出来要疯掉了

然后下面的那个LightList我这个玩意嘛，我承认是看到LOL 4周年的页面发现他的素材不错搞来用了

css3的一个小动画

@keyframes lightAni1 { 0% {opacity: 0.5;transform: translateY(0px);
}
50% {opacity: 1;transform: translateY(-50px);
}
100% {opacity: 0;transform: translateY(-100px);
}
}
@keyframes lightAni1 { 0% {opacity: 0.5;transform: translateY(0px);
}
50% {opacity: 1;transform: translateY(-50px);
}
100% {opacity: 0;transform: translateY(-100px);
}
}
@keyframes lightAni2 { 0% {opacity: 0.5;transform: translate(0px, 0px);
}
50% {opacity: 1;transform: translate(-10px, -50px);
}
100% {opacity: 0;transform: translate(-20px, -100px);
}
}
@keyframes lightAni2 { 0% {opacity: 0.5;transform: translate(0px, 0px);
}
50% {opacity: 1;transform: translate(-10px, -50px);
}
100% {opacity: 0;transform: translate(-20px, -100px);
}
}
@keyframes lightAni3 { 0% {opacity: 0.5;transform: translate(0px, 0px);
}
50% {opacity: 1;transform: translate(10px, -50px);
}
100% {opacity: 0;transform: translate(20px, -100px);
}
}
@keyframes lightAni3 { 0% {opacity: 0.5;transform: translate(0px, 0px);
}
50% {opacity: 1;transform: translate(10px, -50px);
}
100% {opacity: 0;transform: translate(20px, -100px);
}
}

好了，小东西就这点了。。。

接下来么先搞个数组列表了，把要的东西先拿出来玩玩

window.οnlοad=function(){
var MusicList = [{ "name":"On My Own","singer":"ルシュカ" , "src":"mp3/OnMyOwn.mp3" ,"pic":"img/pic/tokyo.jpg","BigPic":"img/pic/tokyo.jpg" },{ "name":"MEMORIA","singer":"藍井エイル" , "src":"mp3/MEMORIA.mp3" ,"pic":"img/pic/tokyo.jpg","BigPic":"img/pic/tokyo.jpg" },{ "name":"OnMyOwn" ,"singer":"ルシュカ" , "src":"mp3/OnMyOwn.mp3" ,"pic":"img/pic/tokyo.jpg","BigPic":"img/pic/tokyo.jpg" },
];

然后么设置了点东西

var player = {nowIndex: 0,    //索引初始化PlayButton: $("#PLAY"),  //播放按钮cover: $("#MusicPhoto"), //封面图HomeBG: $(".HomeHeader"),//背景图SongWord: $(".MusicBoxWord"),//歌词state: 0, // 0-暂停 1-播放audio: $("#audio").get(0),

绑定了点东西

bind: function () {//绑定按钮//播放或暂停var obj = this;this.PlayButton.click(function () {obj.changeState(obj.state ? 0 : 1);});//设置声音$("#voiceSlider").click(function (ex) {var percent = (ex.clientX - $(this).offset().left) / $(this).width();obj.setVoice(percent);});obj.setVoice(1.0);//设置进度$("#MusicProgress").click(function (ex) {var percent = (ex.clientX - $(this).offset().left) / $(this).width();obj.setProgress(percent, false);});//上一首$("#Playleft").click(function () {obj.nowIndex--;if (obj.nowIndex < 0) obj.nowIndex = obj.list.length - 1;obj.playSing(obj.nowIndex);});//下一首$("#Playright").click(function () {obj.nowIndex++;if (obj.nowIndex >= obj.list.length) obj.nowIndex = 0;obj.playSing(obj.nowIndex);player.audio.play();});//绑定事件 - 播放时间改变this.audio.ontimeupdate = function () { obj.timeChange(); }//播放结束this.audio.onended = function () { obj.singEnd(); }//加载第一项this.loadSing(this.nowIndex);},

最后么。。。大家还是自己看demo把

HTML5音乐播放器（最新升级改造加强版）相关推荐

第六节：用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
html音乐播放器如何添加暂停按钮,HotKey播放/暂停HTML5音乐播放器
这是我用于HTML5音乐播放器的一小部分JavaScript代码.我想知道你们是否可以帮我建立一个HotKey来使用Space键切换播放/暂停按钮.有什么想法吗? CODE: $('.tracksli ...
简洁的 HTML5 音乐播放器
mePlayer 一款简洁的HTML5音乐播放器.内置两套主题,可在运行时一键切换, 点我在线预览默认主题有歌词时滚动显示歌词,无歌词时显示模拟频谱动画播放中鼠标悬停在界面上滑动滚轮可调节音量, ...
仿网易云音乐html代码,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
简要教程 APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插 ...
html5自动播放音乐外链,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插件. 安装 ...
自己动手，打造一款适合 Python 程序员的 Html5 音乐播放器
近期断断续续读了一些 Web Audio API 和 WebRTC API 的文档,发现了很多好玩的东西,有一种"忽入桃花源"的感觉.这一款 Html5 音乐播放器,就是基于 We ...
开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer
介绍 APlayer是一个简约且漂亮的html5音乐播放器,支持多种模式,包括播放列表模式.吸底模式 .迷你模式.MSE模式.HLS模式. Github https://github.com/diyg ...
HTML5音乐播放器
明月浩空-HTML5浮窗音乐播放器研发于2014年,并持续更新至今是基于QQ音乐.酷狗音乐.网易云音乐等歌曲ID全自动解析的网页音乐播放器依靠服务器强大的接口功能,只需要一个ID既可获取全部信息 ...
html中加入音乐播放器,4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 => 界面: skPlay ...

HTML5音乐播放器（最新升级改造加强版）

HTML5音乐播放器（最新升级改造加强版）相关推荐

最新文章

热门文章