托管在github上的个人简历、静态网页里的音乐播放器，暂停、下一首、顺序播放

 把github、git、github pages大概搞清楚了之后俺就开始写托管在github pages上的简历网页了，第一次感觉自学以来不算是浪费时间，还是学到了一些东西的。

感觉响应式设计和浏览器兼容会是一个很大的问题，我的预想大概是这样：

判断是移动端还是浏览器端：

　　移动端：加载移动端的样式表

　　浏览器端：判断是哪个浏览器（因为发现相同样式在谷歌和火狐上的效果有一定差别）

　　　　浏览器端浏览：大概设置两个断点，即三套有些微不同的样式表。

不准备用bootstrap的栅格系统，感觉没有意思ฅʕ•̫͡•ʔฅ

 

在简历中准备了一块用来展示过去四个月做的小demo，顺便作为面试家园工作室/暑期实习前的复习了

 

 还是用version的形式来记录，预计version2.0.0开始就是完整的谷歌浏览器端的界面，包括字蛛爬取出来的字体啊，svg图标等等。

 

 

记录一下其中一个小模块：音乐播放器

（谷歌浏览器）

（注意，上图中圈出来的地方都是自己添加的，用的转义字符或者icon图标。）

js代码

   $(function(){
    var audioCounts = 0;
    var songs = ["王若琳-Let's Start From Here.mp3",
                "马修·连恩 - 布列瑟农.mp3",
                "The Brothers Four - 500 miles.mp3",
                "Kygo,Ed Sheeran - I See Fire (Kygo Remix).mp3"];
    var audioSrcFile = "../audio/";
    var player = document.getElementsByTagName("audio")[0];
    var audioCounts;

    $("#rightChange").click(function next (){

        player.pause();

        if(audioCounts == 3){
            audioCounts = 0;
        }else{
            audioCounts++;
        }
        var audioSrc = audioSrcFile + songs[audioCounts];
        console.log(audioSrc);
        document.getElementsByTagName("source")[0].setAttribute("src",audioSrc);
        player.load();
        player.play();
        $("#audioTitle").text(songs[audioCounts].slice(0,-4));
    });

    $("#leftChange").click(function(){
        player.pause();

        if(audioCounts == 0){
            audioCounts = 3;
        }else{
            audioCounts--;
        }
        console.log(audioCounts);
        var audioSrc = audioSrcFile + songs[audioCounts];
        console.log(audioSrc);
        document.getElementsByTagName("source")[0].setAttribute("src",audioSrc);
        player.load();
        player.play();
        $("#audioTitle").text(songs[audioCounts].slice(0,-4));
    });

    $("#closeBtn").click(function(){
        player.pause();
        $("#container").hide();
        $(".showPlayer").show();
    });

    player.onended = function(){

           if(audioCounts == 3){

               audioCounts = 0;

           }else{

               audioCounts++;

           }

var audioSrc = audioSrcFile + songs[audioCounts];
        console.log(audioSrc);
        document.getElementsByTagName("source")[0].setAttribute("src",audioSrc);
        player.load();
        player.play();
        $("#audioTitle").text(songs[audioCounts].slice(0,-4));
    };

   
   })
  

由于是静态页面（没有php、没有asp、没有sql、没有node.js），这是我目前想到的比较okay的一个实现方式，缺点就是在github pages上运行时加载音乐资源需要5s以上的延迟（本机数据）。

几个需要注意的地方：

1.点击“>”按钮时跳转到下一首歌的这个步骤，在更改了路径以后，需要执行一次player.load()，重新加载资源文件，否则不会切换。

2.谷歌浏览器对自动播放政策是有限制的，详情可以点击这篇文章，希望你会有收获。