正文

超实用的音乐播放器插件(jquery+css)

狼_少_年  2022-02-13  806

关键词：

通过在网上搜索了大量的音乐播放器插件后,终于找到了一款上手简单,并且效果不错的插件,该音乐播放器插件是通过Jquery+Css实现的,下面就是全部代码,只要遵循下面的步骤,一定可以实现(文章末尾可查看效果图)

一、目录结构

二、导入jquery-1.7.2.min.js、jquery-ui-1.8.17.custom.min.js、mp3 以及所需要的.png图片

点击右上角的 Fork me on GitHub 到我的GitHub仓库中获取(注意有一些类似播放器上按钮的图片要用我的)

三、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot整合SpringMVC</title>
    <script src="js/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="player">
    <div class="cover"></div>
    <div class="ctrl">
        <div class="tag">
            <strong>Title</strong>
            <span class="artist">Artist</span>
            <span class="album">Album</span>
        </div>
        <div class="control">
            <div class="left">
                <div class="rewind icon"></div>
                <div class="playback icon"></div>
                <div class="fastforward icon"></div>
            </div>
            <div class="volume right">
                <div class="mute icon left"></div>
                <div class="slider left">
                    <div class="pace"></div>
                </div>
            </div>
        </div>
        <div class="progress">
            <div class="slider">
                <div class="loaded"></div>
                <div class="pace"></div>
            </div>
            <div class="timer left">0:00</div>
            <div class="right">
                <div class="repeat icon"></div>
                <div class="shuffle icon"></div>
            </div>
        </div>
    </div>
</div>
<ul id="playlist"></ul>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

四、style.css

* {
    margin: 0;
    padding: 0;
}

body {
    font: 14px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    background: #333;
    color: #fff;
}

a {
    outline: none;
    text-decoration: none;
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

#background {
    background: lightblue;
}

#player {
    border-radius: 20px;
    background: grey;
    width: 500px;
    height: 130px;
    padding: 25px;
    margin: 50px auto 30px;
    position: relative;
}

#player .cover {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    position: absolute;
    top: 25px;
    left: 25px;
    overflow: hidden;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    width: 130px;
    height: 130px;
    -moz-box-shadow: 0 2px 10px black;
    -webkit-box-shadow: 0 2px 10px black;
    -o-box-shadow: 0 2px 10px black;
    box-shadow: 0 2px 10px black;
}

#player .cover img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    width: 130px;
    height: 130px;
}

#player .ctrl {
    margin-left: 155px;
    text-shadow: 0 1px 2px #000;
    line-height: 16px;
}

#player .ctrl .tag strong, #player .ctrl .tag span {
    display: block;
    text-overflow: ellipsis;
}

#player .ctrl .tag span {
    font-size: 12px;
    margin-top: 5px;
    color: #ccc;
}

#player .ctrl .icon {
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    opacity: 0.6;
    cursor: pointer;
    width: 24px;
    height: 24px;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#player .ctrl .icon:hover, #player .ctrl .icon.enable {
    opacity: 1;
}

#player .ctrl .icon:active {
    opacity: 0.3;
}

#player .ctrl .control {
    margin-top: 10px;
    height: 25px;
}

#player .ctrl .control .rewind {
    background-image: url(../img/rewind.png);
}

#player .ctrl .control .playback {
    background-image: url(../img/play.png);
}

#player .ctrl .control .playback.playing {
    background-image: url(../img/pause.png);
}

#player .ctrl .control .fastforward {
    background-image: url(../img/fastforward.png);
}

#player .ctrl .control .volume .mute {
    background-image: url(../img/volume.png);
}

#player .ctrl .control .volume .mute.enable {
    background-image: url(../img/mute.png);
}

#player .ctrl .control .volume .slider {
    margin-top: 11px;
    margin-left: 10px;
    width: 100px;
}

#player .ctrl .progress {
    margin-top: 10px;
}

#player .ctrl .progress .timer {
    font-size: 12px;
    color: #ccc;
    margin-top: 8px;
}

#player .ctrl .progress .repeat, #player .ctrl .progress .shuffle {
    background-position: center bottom;
}

#player .ctrl .progress .repeat {
    background-image: url(../img/repeat.png);
}

#player .ctrl .progress .repeat.once, #player .ctrl .progress .repeat.all {
    opacity: 1;
}

#player .ctrl .progress .repeat.once {
    position: relative;
}

#player .ctrl .progress .repeat.once:before {
    content: "1";
    position: absolute;
    top: 3px;
    right: -2px;
    font-size: 8px;
}

#player .ctrl .progress .shuffle {
    background-image: url(../img/shuffle.png);
}

.slider {
    background: rgba(0, 0, 0, 0.3);
    height: 5px;
    position: relative;
    cursor: pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}

.slider:hover a, .slider.enable a {
    opacity: 1;
}

.slider a {
    background: #fff;
    margin-left: -2.5px;
    position: absolute;
    opacity: 0;
    width: 5px;
    height: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.slider .loaded, .slider .pace {
    position: absolute;
    height: 100%;
    opacity: 0.7;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

.slider .loaded {
    background: rgba(255, 255, 255, 0.1);
}

.slider .pace {
    background: #258fb8;
}

#playlist {
    background: rgba(0, 0, 0, 0.5);
    width: 470px;
    margin: 0 auto 50px;
    padding: 10px 15px;
    list-style: none;
    position: relative;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

#playlist li {
    color: #aaa;
    font-size: 12px;
    line-height: 2;
    padding-left: 25px;
    cursor: pointer;
    text-overflow: ellipsis;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

#playlist li:hover {
    color: #fff;
}

#playlist li.playing {
    background: url(../img/playing.png) no-repeat 0 center;
    color: #fff;
    font-weight: bold;
}

footer {
    position: relative;
    font-size: 12px;
    color: white;
    margin-top: 160px;
    text-shadow: 0 1px 2px #000;
    text-align: center;
}

footer a {
    color: #fff;
    font-weight: bold;
}

footer a:hover {
    text-decoration: none;
}

五、script.js

(function ($) {
    // Settings
    var repeat = localStorage.repeat || 0,
        shuffle = localStorage.shuffle || 'false',
        continous = true,
        autoplay = true,
        playlist = [
            {
                title: '像我这样的人',
                artist: '毛不易',
                album: '像我这样的人.mp3',
                cover: 'img/像我这样的人.gif',
                mp3: 'mp3/毛不易-像我这样的人(Live).mp3',
                ogg: ''
            },
            {
                title: '追梦人',
                artist: '阿木',
                album: '追梦人.mp3',
                cover: 'img/追梦人.gif',
                mp3: 'mp3/追梦人.mp3',
                ogg: ''
            },
            {
                title: '阿刁',
                artist: '赵雷',
                album: '阿刁.mp3',
                cover: 'img/阿刁.gif',
                mp3: 'mp3/阿刁.mp3',
                ogg: ''
            }];

    // Load playlist
    for (var i = 0; i < playlist.length; i++) {
        var item = playlist[i];
        $('#playlist').append('<li>' + item.artist + ' - ' + item.title + '</li>');
    }

    var time = new Date(),
        currentTrack = shuffle === 'true' ? time.getTime() % playlist.length : 0,
        trigger = false,
        audio, timeout, isPlaying, playCounts;

    var play = function () {
        audio.play();
        $('.playback').addClass('playing');
        timeout = setInterval(updateProgress, 500);
        isPlaying = true;
    };

    var pause = function () {
        audio.pause();
        $('.playback').removeClass('playing');
        clearInterval(updateProgress);
        isPlaying = false;
    }

    // Update progress
    var setProgress = function (value) {
        var currentSec = parseInt(value % 60) < 10 ? '0' + parseInt(value % 60) : parseInt(value % 60),
            ratio = value / audio.duration * 100;

        $('.timer').html(parseInt(value / 60) + ':' + currentSec);
        $('.progress .pace').css('width', ratio + '%');
        $('.progress .slider a').css('left', ratio + '%');
    };

    var updateProgress = function () {
        setProgress(audio.currentTime);
    };

    // Progress slider
    $('.progress .slider').slider({
        step: 0.1, slide: function (event, ui) {
            $(this).addClass('enable');
            setProgress(audio.duration * ui.value / 100);
            clearInterval(timeout);
        }, stop: function (event, ui) {
            audio.currentTime = audio.duration * ui.value / 100;
            $(this).removeClass('enable');
            timeout = setInterval(updateProgress, 500);
        }
    });

    // Volume slider
    var setVolume = function (value) {
        audio.volume = localStorage.volume = value;
        $('.volume .pace').css('width', value * 100 + '%');
        $('.volume .slider a').css('left', value * 100 + '%');
    };

    var volume = localStorage.volume || 0.5;
    $('.volume .slider').slider({
        max: 1, min: 0, step: 0.01, value: volume, slide: function (event, ui) {
            setVolume(ui.value);
            $(this).addClass('enable');
            $('.mute').removeClass('enable');
        }, stop: function () {
            $(this).removeClass('enable');
        }
    }).children('.pace').css('width', volume * 100 + '%');

    $('.mute').click(function () {
        if ($(this).hasClass('enable')) {
            setVolume($(this).data('volume'));
            $(this).removeClass('enable');
        } else {
            $(this).data('volume', audio.volume).addClass('enable');
            setVolume(0);
        }
    });

    // Switch track
    var switchTrack = function (i) {
        if (i < 0) {
            track = currentTrack = playlist.length - 1;
        } else if (i >= playlist.length) {
            track = currentTrack = 0;
        } else {
            track = i;
        }

        $('audio').remove();
        loadMusic(track);
        if (isPlaying == true) play();
    };

    // Shuffle
    var shufflePlay = function () {
        var time = new Date(),
            lastTrack = currentTrack;
        currentTrack = time.getTime() % playlist.length;
        if (lastTrack == currentTrack) ++currentTrack;
        switchTrack(currentTrack);
    };

    // Fire when track ended
    var ended = function () {
        pause();
        audio.currentTime = 0;
        playCounts++;
        if (continous == true) isPlaying = true;
        if (repeat == 1) {
            play();
        } else {
            if (shuffle === 'true') {
                shufflePlay();
            } else {
                if (repeat == 2) {
                    switchTrack(++currentTrack);
                } else {
                    if (currentTrack < playlist.length) switchTrack(++currentTrack);
                }
            }
        }
    };

    var beforeLoad = function () {
        var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
        $('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) + '%');
    };

    // Fire when track loaded completely
    var afterLoad = function () {
        if (autoplay == true) play();
    };

    // Load track
    var loadMusic = function (i) {
        var item = playlist[i],
            newaudio = $('<audio>').html('<source src="' + item.mp3 + '"><source src="' + item.ogg + '">').appendTo('#player');

        $('.cover').html('<img src="' + item.cover + '" alt="' + item.album + '">');
        $('.tag').html('<strong>' + item.title + '</strong><span class="artist">' + item.artist + '</span><span class="album">' + item.album + '</span>');
        $('#playlist li').removeClass('playing').eq(i).addClass('playing');
        audio = newaudio[0];
        audio.volume = $('.mute').hasClass('enable') ? 0 : volume;
        audio.addEventListener('progress', beforeLoad, false);
        audio.addEventListener('durationchange', beforeLoad, false);
        audio.addEventListener('canplay', afterLoad, false);
        audio.addEventListener('ended', ended, false);
    };

    loadMusic(currentTrack);
    $('.playback').on('click', function () {
        if ($(this).hasClass('playing')) {
            pause();
        } else {
            play();
        }
    });
    $('.rewind').on('click', function () {
        if (shuffle === 'true') {
            shufflePlay();
        } else {
            switchTrack(--currentTrack);
        }
    });
    $('.fastforward').on('click', function () {
        if (shuffle === 'true') {
            shufflePlay();
        } else {
            switchTrack(++currentTrack);
        }
    });
    $('#playlist li').each(function (i) {
        var _i = i;
        $(this).on('click', function () {
            switchTrack(_i);
        });
    });

    if (shuffle === 'true') $('.shuffle').addClass('enable');
    if (repeat == 1) {
        $('.repeat').addClass('once');
    } else if (repeat == 2) {
        $('.repeat').addClass('all');
    }

    $('.repeat').on('click', function () {
        if ($(this).hasClass('once')) {
            repeat = localStorage.repeat = 2;
            $(this).removeClass('once').addClass('all');
        } else if ($(this).hasClass('all')) {
            repeat = localStorage.repeat = 0;
            $(this).removeClass('all');
        } else {
            repeat = localStorage.repeat = 1;
            $(this).addClass('once');
        }
    });

    $('.shuffle').on('click', function () {
        if ($(this).hasClass('enable')) {
            shuffle = localStorage.shuffle = 'false';
            $(this).removeClass('enable');
        } else {
            shuffle = localStorage.shuffle = 'true';
            $(this).addClass('enable');
        }
    });
})(jQuery);

效果如下,即可播放音乐(如果需要调整大小,可以自行修改style.css中的样式)

超简单实用的前端分页---jquery插件

首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页.　　简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理;　　而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据.最近,下... 查看详情

基于jquery的音乐播放器进度条插件

　　自己基于豆瓣FM的ui仿写qq音乐时，基于Jquery手写的进度条插件，效果图如下：　　　　主要特色：　　　　①可自适应挂载元素的宽度，也可以自己设置进度条宽度；　　　　②支持部分默认参数修改（具体见使用说明）；... 查看详情

jquery插件和css3怎么用在wordpress上面

...们就来看看jQuery和CSS3的魅力，这几款应用有些还是比较实用的。　　1、jQuery图片横向滚动插件　　这是一款利用jQuery实现的图片横向滚动插件，我们可以设置任意数量的图片，然后点击左右箭头按钮即可分组浏览这些图片。这... 查看详情

vscode超实用插件推荐，让你的开发效率火力全开(代码片段)

辅助开发类：1. VeturVUE开发必备插件1.语法高亮，包括vue/htmlcss/sass/scss/less/stylusjs/ts2.语义高亮，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件3.语法错误检查，包括CSS/SCSS/LESS/Javascript/TypeSc... 查看详情

3个超实用的资源搜索网站，有了它们，再也没有你找不到的资源！

...不到自己需要的资源而烦恼？别烦恼啦~快来看看这3个超实用的资源搜索网站，有了它们，再也没有你找不到的资源！ 1.BT搜BT搜，这个网站虽然看起来比较简单，但是却有很多非常实用的资源，没有你找不到，只有你想不到... 查看详情

超实用的jquery小技巧(代码片段)

JQuery是一个JavaScript库，她极大的简化了我们对JavaScript的编程。今天我们总结了下平常项目中用到的一些小技巧，仅供参考。1、替换元素//替换元素$(document).ready(function()$("#id").replaceWith(‘<p>Ihavebeenrepaced</p>‘));2、延时加... 查看详情

jquery仿qq音乐播放器(代码片段)

本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器，是前端技术的综合应用，所用素材来源于网络，仅供学习分享使用，如有不足之处，还请指正。涉及知识点在本例中用到的知识点如下，按jQuery和CSS进行区分：jQuery 是一个JavaScr... 查看详情

7.1万star！超实用，60多种动画效果的css库

【导语】：animate.css是一个有趣的，跨浏览器的CSS3动画库。简介animate.css是一个有趣的，跨浏览器的css3动画库，兼容性好，使用方便。它预设了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达60多种动画效果，几乎包含了所有... 查看详情

css3超实用属性：pointer-events

最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态... 查看详情

在ubuntu上有啥必装的实用软件？

...更安全的浏览体验。音乐应用Ubuntu将Rhythmbox作为默认音乐播放器，这是个相当不坏的选择。不过，你当然可以安装更好的音乐播放器。SayonaraSayonara是一个小型、轻量并具备漂亮的深色用户界面的音乐播放器。它拥有所有你期望... 查看详情

vscode-超实用插件推荐(代码片段)

今天这篇文章呢，是想和大家分享一波Vscode中一些好用的插件，可能不全，会持续更新，所以欢迎大家分享自己觉得好用的Vscode插件，咱们评论区见哦~1.LiveServer作用：可以在本地启动一个服务器，可以... 查看详情

超实用的vscode插件推荐，快看看你都用到了哪些？

...件系统，深得广大开发者的喜欢。今天推荐一些非常实用的插件，让开发如虎添翼。1.CodeIf（变量命名神器）安装次数：9万+在项目开发中，命名是一项非查看详情

intellijidea超实用使用技巧分享

https://blog.csdn.net/weixin_38405253/article/details/102583954 知识点概览：高效率配置日常使用必备快捷键（★★）查找跳转切换编码相关代码阅读相关版本管理相关编码效率相关（★★）文件代码模板实时代码模板其他代码调试源码阅... 查看详情

魔音，mp3音乐下载器兼播放器，界面简洁，歌曲资源超多，实现听歌自由！

...、软件简介魔音（Morin）音乐是一款界面非常简洁的音乐播放器，完全免费，支持切换四大音源，不需要登录，拥有大量热门歌单，同时支持一键下载mp3格式的音乐，一般而言，能搜索到的音乐都能下载。二、使用方法解压压缩... 查看详情

15个超强悍的css3圆盘时钟动画赏析

在网页上，特别是个人博客中经常会用到时钟插件，一款个性化的时钟插件不仅可以让页面显得美观，而且可以让访客看到当前的日期和时间。今天我们给大家收集了15个超强悍的圆盘时钟动画，很多都是基于CSS3，也有一部分利... 查看详情

音乐播放插件aplayer+webapi的使用附下载

本次介绍的是音乐播放器APlayer结合WebAPI的使用，先给各位看下效果: 上面就是APlayer的效果，然后这插件的地址是 https://github.com/DIYgod/APlayer 下面是项目内容： APlayerAndWebApi是处理APlayer的，而WebAPI则是生成音乐列表... 查看详情

csdn-超实用and高逼格的浏览器插件使用指南(代码片段)

...：工欲善其事，必先利其器。在开发过程中一个实用的插件往往能在很大程度上提查看详情

6月份那些最实用的jquery插件专辑

　　jQuery是一个快速、流行的JavaScript库，jQuery用于文档处理、事件处理、动画和Ajax交互非常简单，学习曲线也很平坦。2016年6月的jQuery插件专辑里，我们选择一些最好的和有用的jQuery插件分享给大家。您可能感兴趣的相关文章We... 查看详情