Хостинг на GitHub резюме, статические страницы в музыкальном проигрывателе, пауза, следующий, порядок игры

В GitHub, мерзавец, GitHub странице, вероятно, узнать, после того, как Anjiu начать писать свою страницу резюме размещается на GitHub страницах впервые, так как самоощущение не пустая трата времени, узнал несколько вещей.

Почувствовав совместимость адаптивный дизайн и браузер будет большой проблемой, я ожидал что-то вроде этого:

Анализ мобильного терминала или браузер:

　　Мобильный терминал: загрузка мобильного терминала таблицы стилей

　　Браузер: определить, какой браузер (как найдено в тот же эффект стиля на Google и Firefox имеют некоторые отличия)

　　　　Браузер здесь: возможно установить две точки останова, что три комплекта несколько различных стилей.

Не готов использовать загрузочную подвесную систему, я не чувствую никакого смысла ฅ ʕ • ̫͡ • ʔ ฅ

Мы подготовили шоу в течение последних четырех месяцев, чтобы сделать небольшую демонстрацию в вашем резюме, пути домой, как обзор до интервью студии / летней стажировки

Или используйте форму для версии записи, предполагается начать version2.0.0 полный интерфейс браузера Google, который включает в себя слово паук ползет из купели ах, SVG иконок и так далее.

Один небольшой модуль о записи: Music Player

(Google Chrome)

(Обратите внимание, что эта цифра выше, где кольцо из его собственного, чтобы добавить, с экранирующий символ или значок значок.)

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(){
        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.谷歌浏览器对自动播放政策是有限制的，详情可以点击这篇文章，希望你会有收获。

Хостинг на GitHub резюме, статические страницы в музыкальном проигрывателе, пауза, следующий, порядок игры

рекомендация