一款粉红色调典雅风格的音乐播放器

HTML5 Music Player, 带快进/回退/播放/混序等按钮。

h5, player, music

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2578
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function IIFE() {
    var list = [{
            id: 1,
            url: "/uploads/1901/1.mp3",
            author: "Marcel Pequel",
            title: "One",
            cover: "/uploads/1901/cover.jpg"
        },

{
            id: 2,
            url: "/uploads/1901/2.mp3",
            author: "Marcel Pequel",
            title: "Two",
            cover: "/uploads/1901/cover.jpg"
        },

{
            id: 3,
            url: "/uploads/1901/3.mp3",
            author: "Marcel Pequel",
            title: "Three",
            cover: "/uploads/1901/cover.jpg"
        }
    ];

var currentId = 0;
    var isPlaying = false;
    var isLoop = true;
    var isShuffle = false;
    var currentAudio = "music1";
    var timer = null;
    var loopOne = false;

var currentTimeIndicator = document.querySelector(".music-time__current");
    var leftTimeIndicator = document.querySelector(".music-time__last");
    var progressBar = document.getElementById("length");
    var playBtn = document.querySelector(".play");
    var cover = document.querySelector(".cover");
    var title = document.querySelector(".music-player__title");
    var author = document.querySelector(".music-player__author");

var loopBtn = document.getElementById("loop");
    var shuffleBtn = document.getElementById("shuffle");
    var forwardBtn = document.getElementById("forward");
    var backwardBtn = document.getElementById("backward");
    var prevBtn = document.getElementById("prev");
    var nextBtn = document.getElementById("next");
    var progressDiv = document.getElementById("progress");

function changeBar() {
        var audio = document.getElementById(currentAudio);
        var percentage = (audio.currentTime / audio.duration).toFixed(3);
        progressBar.style.transition = "";
        // console.log(audio.currentTime);

//set current time
        var minute = Math.floor(audio.currentTime / 60);
        var second = Math.floor(audio.currentTime % 60);
        var leftTime = audio.duration - audio.currentTime;
        currentTimeIndicator.innerHTML =
            ("0" + minute).substr(-2) + ":" + ("0" + second).substr(-2);

//set left time
        var leftMinute = Math.floor(leftTime / 60);
        var leftSecond = Math.floor(leftTime % 60);

leftTimeIndicator.innerHTML =
            ("0" + leftMinute).substr(-2) + ":" + ("0" + leftSecond).substr(-2);

//set time bar
        progressBar.style.width = percentage * 100 + "%";
    }

function showTime() {
        timer = setInterval(function() {
            return changeBar();
        }, 500);
    }

function nextMusic(mode) {
        playBtn.src =
            "/uploads/1901/play.svg";
        playBtn.alt = "Play";
        document.getElementById(currentAudio).pause();
        isPlaying = false;
        clearInterval(timer);

if (mode === "next") {
            currentId = currentId + 1 > list.length - 1 ? 0 : currentId + 1;
            init();
        } else {
            currentId = currentId - 1 < 0 ? list.length - 1 : currentId - 1;
            init();
        }
    }

function backward() {
        var audio = document.getElementById(currentAudio);
        audio.currentTime -= 5;
        if (!isPlaying) {
            changeBar();
        }
    }

function forward() {
        var audio = document.getElementById(currentAudio);
        audio.currentTime += 5;
        if (!isPlaying) {
            changeBar();
        }
    }

function stopMusic() {
        playBtn.src =
            "/uploads/1901/play.svg";
        playBtn.alt = "Play";
        isPlaying = false;
    }

function goToNextMusic() {
        var newId = currentId;
        while (isShuffle && !loopOne && newId === currentId) {
            newId = Math.floor(Math.random() * Math.floor(list.length - 1));
        }

if (!isShuffle && !loopOne) {
            currentId = currentId + 1 > list.length - 1 ? 0 : currentId + 1;
        }
        if (!isShuffle && loopOne) {
            currentId = currentId;
        }

if (isShuffle) {
            currentId = newId;
        }
        init();
        document.getElementById(currentAudio).play();
    }

function loop(e) {
        var audio = document.getElementById(currentAudio);

if (!isLoop && !loopOne) {
            isLoop = true;
            loopOne = false;
            // console.log('is loop');
            e.target.parentNode.classList.add("is-loop");
            e.target.src =
                "/uploads/1901/loop.svg";
            audio.loop = false;
            audio.onended = function(e) {
                return goToNextMusic();
            };
            console.log(isLoop, loopOne);
        } else if (isLoop && !loopOne) {
            // console.log('is loop one');
            isLoop = true;
            loopOne = true;
            e.target.parentNode.classList.add("is-loop");
            e.target.src =
                "/uploads/1901/loopone.svg";
            audio.loop = true;
            audio.onended = function(e) {
                return goToNextMusic();
            };
            console.log(isLoop, loopOne);
        } else {
            // console.log('not loop');
            isLoop = false;
            loopOne = false;
            e.target.parentNode.classList.remove("is-loop");
            e.target.src =
                "/uploads/1901/loop.svg";
            audio.loop = false;
            audio.onended = function(e) {
                return stopMusic();
            };
            console.log(isLoop, loopOne);
        }
    }

function progress(e) {
        var audio = document.getElementById(currentAudio);
        //get current position and minus progress bar's x position to get current position in progress bar
        var pos =
            (e.pageX - progressDiv.getClientRects()[0].x) /
            progressDiv.getClientRects()[0].width;
        audio.currentTime = pos * audio.duration;
        changeBar();
    }

function init() {
        //reset music duration and setup audio
        var audio =
            document.getElementById(currentAudio) === null ?
            new Audio() :
            document.getElementById(currentAudio);
        audio.src = list[currentId].url;
        audio.id = currentAudio;
        document.getElementById(currentAudio) === null ?
            document.body.appendChild(audio) :
            "";

progressBar.style.transition = "none";
        progressBar.style.width = "0%";
        document.getElementById(currentAudio).currentTime = 0;

title.innerHTML = list[currentId].title;
        author.innerHTML = list[currentId].author;
        cover.src = list[currentId].cover;

//set current time
        audio.addEventListener("loadedmetadata", function() {
            var leftMinute = Math.floor(audio.duration / 60);
            var leftSecond = Math.floor(audio.duration % 60);
            currentTimeIndicator.innerHTML = "00:00";
            leftTimeIndicator.innerHTML =
                ("0" + leftMinute).substr(-2) + ":" + ("0" + leftSecond).substr(-2);
            progressBar.style.transition = "";
        });

//set loop
        document.getElementById(currentAudio).onended = function(e) {
            return goToNextMusic(e);
        };
    }

playBtn.addEventListener("click", play);
    loopBtn.addEventListener("click", loop);

shuffleBtn.addEventListener("click", shuffle);
    forwardBtn.addEventListener("click", forward);
    backwardBtn.addEventListener("click", backward);

prevBtn.addEventListener("click", function(e) {
        return nextMusic("prev");
    });
    nextBtn.addEventListener("click", function(e) {
        return nextMusic("next");
    });
    progressDiv.addEventListener("click", function(e) {
        progress(e);
    });

init();
})();

编译

CSS

div > img {
    transition: 300ms;
}
div > img:hover {
    opacity: 0.7;
    cursor: pointer;
}
div {
    box-sizing: border-box;
}
img {
    width: 100%;
    height: 100%;
}
p {
    margin-top: 0;
    margin-bottom: 0.3em;
}
body {
    font-family: "Mukta", sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 100vw;
    min-height: 100vh;
    background: linear-gradient(-45deg, #FFCDD2 50%, #B2EBF2 50%);
}
div,
section {
    box-sizing: border-box;
}
.c-containter {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 1em;
}
.music-container {
    position: relative;
    display: flex;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
    max-height: 290px;
}
.album-cover {
    flex: 1 0 30%;
}
.album-cover img {
    width: 100%;
    height: 100%;
}
.arrow {
    position: absolute;
    top: calc(50% - 2.5em);
    background: rgba(255, 255, 255, 0.3);
    border: 0;
    width: 5em;
    height: 5em;
    cursor: pointer;
}
.arrow:hover {
    background: rgba(255, 255, 255, 0.5);
}
.arrow img {
    display: block;
    width: 20px;
    margin: 0 auto;
}
.arrow.left {
    left: -5em;
}
.arrow.right {
    right: -5em;
}
.music-player {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    background: white;
    padding: 1em;
    text-align: center;
    width: 500px;
    max-width: 500px;
}
.music-player__title {
    margin: 0 0 0.1em 0;
}
.music-player__author {
    margin: 0 0 0.5em 0;
}
.music-bar {
    background: #efefef;
    stroke-width: 1;
    height: 8px;
    width: 100%;
}
.music-bar:hover {
    cursor: pointer;
}
.music-bar #length {
    width: 0%;
    background: #2196F3;
    height: 100%;
    transition: width linear 200ms;
}
.music-time {
    display: flex;
    flex-flow: row wrap;
}
.music-time__last {
    margin-left: auto;
}
.music-order {
    display: flex;
    flex-flow: row wrap;
}
.music-order__shuffle,
.music-order__loop {
    width: 1.2em;
    height: 1.2em;
    opacity: 0.2;
    margin: 0.3em 0;
}
.music-order__shuffle.is-loop,
.music-order__loop.is-loop {
    opacity: 1 !important;
}
.music-order__shuffle.is-loop-one,
.music-order__loop.is-loop-one {
    opacity: 1 !important;
}
.music-order__shuffle {
    margin-left: auto;
}
.music-control {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    height: 2em;
}
.music-control__play {
    width: 3em;
    height: 3em;
    margin: 0 1em;
}
.music-control__backward,
.music-control__forward {
    width: 1.5em;
    height: 1.5em;
}
.disclaimer {
    font-size: 0.9em;
    margin-top: 1em;
    text-align: center;
}
.disclaimer a {
    color: #2196F3;
}
@media all and (max-width: 960px) {
    .c-containter {
        display: block;
        overflow: auto;
    }
    .music-container {
        flex-flow: column wrap;
        max-height: inherit;
        max-width: 270px;
        margin: 0 auto;
        overflow: auto;
    }
    .music-player {
        width: 100%;
        max-width: 100%;
    }
    .music-player__title {
        font-size: 1.5em;
    }
    .music-player__author {
        font-size: 1em;
    }
    .album-cover {
        position: relative;
        flex: 1 1 100%;
        max-width: 270px;
        max-height: 270px;
    }
    .arrow {
        position: absolute;
        top: calc(50% - 1.5em);
        width: 3em;
        height: 3em;
    }
    .arrow.left {
        left: 0;
    }
    .arrow.right {
        right: 0;
    }
    .music-control__play {
        width: 2.2em;
        height: 2.2em;
    }
}

HTML

HTML5 Music Player, 带快进/回退/播放/混序等按钮。

h5, player, music

编辑器支持Emmet

快捷键

HTML5 Music Player, 带快进/回退/播放/混序等按钮。

h5, player, music

一款粉红色调的移动音乐播放器界面

暗红色调的音乐播放器设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：