运用jQuery+jplayer 制作简洁音乐播放器

最新推荐文章于 2023-01-20 14:26:12 发布

jiaweimin123

最新推荐文章于 2023-01-20 14:26:12 发布

阅读量1.1k

点赞数 1

分类专栏： jquery javascript css html 文章标签： javascript jquery 函数音乐播放器

本文链接：https://blog.csdn.net/jiaweimin123/article/details/77693335

版权

javascript 同时被 3 个专栏收录

41 篇文章 2 订阅

订阅专栏

html

26 篇文章 0 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>music player</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="music.test.css">
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.structure.min.css">
</head>
<body>
<div id="container">
    <div id="MyJplayer"></div>
    <div id="top">
        <p>Easy Music Player</p>
    </div>
    <div id="voice">
        <input id="subVo" class="key cut" type="button" value="">
        <div id="vol-full">
            <div id="cur-vol">
            </div>
        </div>
        <input id="addVo" class="key add" type="button" value="">
    </div>
    <div class="album" id="album-1"></div>
    <div id="lyrics"><h3>刘珂矣——弄戏</h3><p>作词：刘珂矣</p><p>作曲：刘珂矣、百慕三石</p></div>
    <div class="ctrl">
        <div id="#down-2">
            <div class="time start" id="begin"></div>
            <div id="progress" style="padding:0;">
                <div id="progress-c"></div>
            </div>
            <div class="time over" id="end"></div>
        </div>
        <div id="press">
            <input id="last" class="key last" type="button" value="">
            <input id="but" type="button" value="" οnclick="play()">
            <input id="pause" type="button" value="" οnclick="stop()">
            <input id="next" class="key next" type="button" value="">
        </div>
    </div>
    <div id="slider"></div>
</div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="./jplayer/jquery.jplayer.min.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="test.main.js"></script>
</body>
</html>








js部分：
/**
 * Created by Administrator on 2017/8/29.
 */
var volume = 0;
var curPer = 0;

$(document).ready(function () {

    $("#but").css("background-position", "-42px -44px");
    $("#MyJplayer").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                title: "Bubble",
                mp3: "http://106.15.195.250:3000/musics/nonxi.mp3"
            }).jPlayer("play");
        },
        ended: function () {  //结束，监听函数
            $("#but").css("background-position", "-42px -2px");
            $("#progress-c").css({
                "width": 0 + "px"
            });
        },
        timeupdate: function (event) {
            var curPer = event.jPlayer.status.currentPercentRelative;
            changeProgressHandler(curPer);
            var val=Math.round(curPer);

            document.getElementById('end').innerHTML = 0+"3"+":"+"42";
            var timeSeconds = parseInt(event.jPlayer.status.currentTime);
            var seconds,minutes,hours;
            hours = parseInt(timeSeconds / 3600);
            minutes = parseInt(( timeSeconds % 3600 ) / 60);
            seconds = timeSeconds % 60;
            showTime(hours,minutes,seconds);
        },
        swfPath: "js",
        supplied: "mp3",
        wmode: "window",
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true,
        volume: 0.1,
        seekBar: ".seekBar"
    });

    //显示播放的实时时间  将毫秒转化成标准时间
    function showTime(hours,minutes,seconds){
        var str = "";
        if(hours){
            if(hours <10){
                str = "0"+hours
            }else{
                str = hours;
            }
            str += ":";
        }
        if(minutes < 10){
            str += "0"+minutes
        }else{
            str += minutes;
        }
        str += ":";
        if(seconds < 10){
            str += "0"+seconds
        }else{
            str += seconds;
        }
        document.getElementById('begin').innerHTML = str;//将时间添加到输出位置
    }
       //音量初始状态
    $("#cur-vol").css("width",0);
    $("#MyJplayer").jPlayer("volume", 0.1);

       //按钮点击--音量出现
    $("#addVo").on("click", function () {
        $("#MyJplayer").jPlayer("volume", 0.1);
        $("#vol-full").slider("value",10);
        $("#cur-vol").css("width",25+'px');
        $(".cut").css("background-position", "-80px -168px");
    });
        // 按钮点击--音量消失
    $("#subVo").on("click", function () {
        $("#MyJplayer").jPlayer("volume", 0);
        $(".cut").css("background-position", "-60px -168px");
        $("#cur-vol").css("width",0);
        $("#vol-full").slider("value",0);
    });


    // 歌曲播放进度条-实时增加宽度
    function changeProgressHandler(curPer) {
        var nodeWidth = $("#progress").width();
        var width = Math.round(curPer * nodeWidth/100);
        //背景颜色根据实时的百分比宽度而显示
        $("#progress-c").css({
            "width": width + "px"
        });
    }

    // 进度条（鼠标点击时X坐标减去div距窗口的left值再除以div的宽度，得到实时宽度占比）
    $("#progress").on("click", function (e) {
        var curper;
        var left = document.getElementById("progress").getBoundingClientRect().left;
        var abWidth = Math.round(e.clientX - left);
        var nodeWidth = $(this).width();
        var per = Math.round(100 * (abWidth / nodeWidth));
        //播放头 根据实时的宽度值而改变
        $("#MyJplayer").jPlayer("playHead", per);
        setTimeout(function () {
            var width = Math.round(curPer * nodeWidth / 100);
            $("#progress-c").css({
                "width": abWidth + "px"
            })
        }, 20);
    });

    // 声音滚动条，和滑轮一起运动
    $("#vol-full").slider({
        animate: true,
        slide: function (event, ui) {},
        change: function(event, ui ) {
            $("#cur-vol").css({"width": ui.value*2.5 + 'px'});
            $("#MyJplayer").jPlayer("volume", ui.value / 100);
        }
    });

    // 滚动条  调用引入的文件 slide方法 播放进度
    $("#progress").slider({
        animate: true,
        slide: function (event, ui) {},
        change: function(event, ui ) {
            $("#progress-c").css({"width": ui.value*1.8 + 'px'});
        }
    });

    //上一曲按钮 更改音乐源
    $("#last").on("click", function () {
        $("#MyJplayer").jPlayer("setMedia", {
            title: "Bubble",
            mp3: "http://106.15.195.250:3000/musics/moheng.mp3"
        }).jPlayer("play");
    });
        //下一曲按钮 更改音乐源
    $("#next").on("click", function () {
        $("#MyJplayer").jPlayer("setMedia", {
            title: "Bubble",
            mp3: "http://106.15.195.250:3000/musics/moheng.mp3"
        }).jPlayer("play");
    });
});


//暂停按钮的点击事件
var pause = false;
function stop() {
    if (!pause) {
        $("#MyJplayer").jPlayer("stop");
        $("#pause").css("background-position", "0 -83px");
        $("#but").css("background-position", "-42px -2px");
        pause = true;
    }
}

//播放函数及对应的执行事件
function play() {
    if (pause) {
        $("#MyJplayer").jPlayer("play");
        $("#pause").css("background-position", "-29px -83px");
        $("#but").css("background-position", "-42px -44px");
    } else {
        $("#MyJplayer").jPlayer("pause");
        $("#but").css("background-position", "-42px -2px");
    }
    pause = !pause;
}