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

来源：互联网发布：inside剧情解析知乎编辑：程序博客网时间：2024/04/29 10:21

<!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="" onclick="play()">            <input id="pause" type="button" value="" onclick="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;}

阅读全文

0 0