这种在线音乐盒是如何制作出来的（ASP.NET技术）

Question

这种在线音乐盒是如何制作出来的
停止 暂停 播放 上一曲 下一曲 音量 顺序播放 随机播放 等功能是如何实现的 求大侠指教！！

Answer 1

//var musicFiles = [
// { name: "偷偷的爱 1", author: "丁当", url: "../../MusicFile/因为爱情.mp3" },
//    { name: "爱要坦荡荡2", author: "萧萧", url: "../../MusicFile/情歌.MP3" },
// { name: "偷偷的爱 3", author: "丁当", url: "../../MusicFile/因为爱情.mp3" },
//    { name: "爱要坦荡荡4", author: "萧萧", url: "../../MusicFile/情歌.MP3" },
//    { name: "偷偷的爱 5", author: "丁当", url: "../../MusicFile/因为爱情.mp3" },
//    { name: "爱要坦荡荡6", author: "萧萧", url: "../../MusicFile/情歌.MP3" },
//    { name: "偷偷的爱 7", author: "丁当", url: "../../MusicFile/因为爱情.mp3" },
//    { name: "爱要坦荡荡", author: "萧萧", url: "../../MusicFile/情歌.MP3" },
//    { name: "偷偷的爱 9", author: "丁当", url: "../../MusicFile/因为爱情.mp3" },
//    { name: "爱要坦荡荡", author: "萧萧", url: "../../MusicFile/情歌.MP3" }
//];
$(function () {
//注册删除数组指定索引元素方法
//    Array.prototype.remove = function (dx) {
//        if (isNaN(dx) || dx > this.length) { return false; }
//        for (var i = 0, n = 0; i < this.length; i++) {
//            if (this[i] != this[dx]) {
//                this[n++] = this[i]
//            }
//        }
//        this.length -= 1
//    }
    for (var a in musicFiles) {
        $(".MusicList").append("<li>" + musicFiles[a].name + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + musicFiles[a].author + "</li>");
    }
});
$(function () {
    //获取音频工具 
    var audio = document.getElementById("myMusic");
    var musicIndex = -1; //当前正在播放的歌曲的索引
    var playingFile = null; //当前正在播放的歌曲
    //开始，暂停按钮
    $("#play")._toggle(function () {
        if (audio.src == "") {
            $(".MusicList>li").eq(0).addClass("isplay");
            PlayMusic(0);
        }
        audio.play();
    }, function () {
        audio.pause();
    });    //播放歌曲
    function PlayMusic(Index) {
        playingFile = musicFiles[Index];
        $(".MusicBox .ProcessControl .SongName").text(playingFile.name);
        $("#play").removeClass("stop").addClass("play");
        $(".MusicList>li").removeClass("isplay").eq(Index).addClass("isplay");
        audio.src = playingFile.url
        audio.play();
        TimeSpan();
    }
    //删除列表中的歌曲
    //    $(".MusicList input").click(function () {
    //        Index = $(".MusicList input").index(this);
    //        if (Index == musicIndex) {
    //            audio.pause();
    //            musicFiles.remove(Index);
    //            $(".MusicList>li").eq(Index).remove();
    //        }
    //        musicFiles.remove(Index);
    //        $(".MusicList>li").eq(Index).remove();
    //    });
    //歌曲列表的选择操作
    $(".MusicList>li").dblclick(function () {
        musicIndex = $(".MusicList>li").index(this);
        PlayMusic(musicIndex);
    });    //左前进按钮
    $(".LeftControl").click(function () {
        if (musicIndex == 0) {
            musicIndex = musicFiles.length - 1;
        }
        else {
            musicIndex = musicIndex - 1;
        }
        PlayMusic(musicIndex);
    });    //右前进按钮
    $(".RightControl").click(function () {
        if (musicIndex == musicFiles.length - 1) {
            musicIndex = 0;
        }
        else {
            musicIndex = musicIndex + 1;
        }
        PlayMusic(musicIndex);    });    //静音按钮切换事件
    $("#mute")._toggle(
            function () {
                $("#vol").css("width", "0");
                $("#col").css("left", "0");
                audio.volume = 0;
            },
            function () {
                $("#vol").css("width", "100%");
                $("#col").css("left", "100%");
                audio.volume = 1;
            }
            );    //音量进度条事件
    $("#volSlider").click(function (e) {        //音量进度条的基准参数
        var Process = $("#volSlider").offset();
        var ProcessStart = Process.left;
        var ProcessLength = $("#volSlider").width();        var CurrentProces = e.clientX - ProcessStart;
        VolumeProcessRange(CurrentProces / ProcessLength);
        $("#vol").css("width", CurrentProces);
        $("#col").css("left", CurrentProces);
    });    //播放进度条事件
    $("#progressSlider").click(function (e) {
        //播放进度条的基准参数
        var VoidProcess = $("#progressSlider").offset();
        var VoidProcessStart = VoidProcess.left;
        var VoidProcessLength = $("#progressSlider").width();        var CurrentProces = e.clientX - VoidProcessStart;
        DurationProcessRange(CurrentProces / VoidProcessLength);
        $("#Process").css("width", CurrentProces);
        $("#proControl").css("left", CurrentProces);
    });    //播放进度条调整
    var Pisdown = false;
    $("#progressSlider").mousedown(function (e) {
        var VoidProcess = $("#progressSlider").offset();
        var VoidProcessStart = VoidProcess.left;
        var VoidProcessLength = $("#progressSlider").width();        var CurrentProces = e.clientX - VoidProcessStart;        if (CurrentProces / VoidProcessLength < 1) {
            DurationProcessRange(CurrentProces / VoidProcessLength);
            $("#Process").css("width", CurrentProces);
            $("#proControl").css("left", CurrentProces);
        }
        Pisdown = true;
    });    $(document).mousemove(function (e) {
        if (Pisdown) {
            var VoidProcess = $("#progressSlider").offset();
            var VoidProcessStart = VoidProcess.left;
            var VoidProcessLength = $("#progressSlider").width();            var CurrentProces = e.clientX - VoidProcessStart;            if (CurrentProces / VoidProcessLength < 1) {
                DurationProcessRange(CurrentProces / VoidProcessLength);
                $("#Process").css("width", CurrentProces);
                $("#proControl").css("left", CurrentProces);
            }
        }
    });
    var Visdown = false;
    //音量进度条调整
    $("#volSlider").mousedown(function (e) {
        var Process = $("#volSlider").offset();
        var ProcessStart = Process.left;
        var ProcessLength = $("#volSlider").width();        var CurrentProces = e.clientX - ProcessStart;
        if (CurrentProces / ProcessLength) {
            VolumeProcessRange(CurrentProces / ProcessLength);
            $("#vol").css("width", CurrentProces);
            $("#col").css("left", CurrentProces);
        }
        Visdown = true;
    });    $(document).mousemove(function (e) {
        if (Visdown) {
            var Process = $("#volSlider").offset();
            var ProcessStart = Process.left;
            var ProcessLength = $("#volSlider").width();            var CurrentProces = e.clientX - ProcessStart;            if (CurrentProces / ProcessLength) {
                VolumeProcessRange(CurrentProces / ProcessLength);
                $("#vol").css("width", CurrentProces);
                $("#col").css("left", CurrentProces);
            }
        }
    });
    //鼠标弹起状态执行
    $(document).mouseup(function () {
        Pisdown = false;
        Visdown = false;
    });    //监听媒体文件结束的事件（ended），这边一首歌曲结束就读取下一首歌曲，实现播放上的循环播放
    audio.addEventListener('ended', function () {
        if (musicIndex == musicFiles.length) {
            musicIndex = 0;
        }
        else {
            musicIndex = musicIndex + 1;
        }
        PlayMusic(musicIndex);
    }, false);
});//音量进度条的转变事件
function VolumeProcessRange(rangeVal) {
    var audio = document.getElementById("myMusic");
    audio.volume = parseFloat(rangeVal);
}//播放进度条的转变事件
function DurationProcessRange(rangeVal) {
    var audio = document.getElementById("myMusic");
    audio.currentTime = rangeVal * audio.duration;
    audio.play();
}
//暂停事件
function Pause() {
    var audio = document.getElementById("myMusic");
    $(".curTime").val(audio.currentTime);
    audio.pause();
}//继续播放事件
function Continue() {
    var audio = document.getElementById("myMusic");
    audio.startTime = $(".curTime").val();
    audio.play();
}//时间进度处理程序
function TimeSpan() {
    var audio = document.getElementById("myMusic");
    var ProcessYet = 0;
    setInterval(function () {
        var ProcessYet = (audio.currentTime / audio.duration) * 803;
        $("#Process").css("width", ProcessYet);
        $("#proControl").css("left", ProcessYet);
        var currentTime = timeDispose(audio.currentTime);
        var timeAll = timeDispose(TimeAll());
        $(".curTime").html(currentTime + "&nbsp;|&nbsp;" + timeAll);
    }, 1000);
}//时间处理，因为时间是以为单位算的，所以这边执行格式处理一下
function timeDispose(number) {
    var minute = parseInt(number / 60);
    var second = parseInt(number % 60);
    minute = minute >= 10 ? minute : "0" + minute;
    second = second >= 10 ? second : "0" + second;
    return minute + ":" + second;
}//当前歌曲的总时间
function TimeAll() {
    var audio = document.getElementById("myMusic");
    return audio.duration;
}这里有一些javascript代码 我用了 好使