HTML5操作

js代码:

MusicBox = function() {
    var _this = this;
    var media = document.getElementById("musicBox");
    var musicFiles = [];


    //当前正在播放的歌曲的索引               
    var index = -1;
    //当前正在播放的歌曲
    var playingFile = null;
    //播放模式
    var playMode = 1;
    //下一首
    this.nextMusic = function() {
        if (playMode == "1") {
            index += 1;
        }
        if (index == musicFiles.length) {
            index = 0;
        }
        this.PlayCallBack();
        $("#proover").css("width", "0px");

    }

    //加载

    this.loadStart = function() {

    }

    //播放
    this.playing = function() {
        setInterval(function() {
            ProceThing();
            var current = GetCurrent();
            $("#atime").html(current);
        }, 100);
        var message = GetToTime();
        $("#Span1").html(message);

    }
    //暂停
    this.pausePaly = function() {
    }

    //加载出错
    this.loadError = function() {
        this.nextMusic();
    }
    //列表增加歌曲
    this.AddList = function(res) {
        var List = [];
        List = store(res);
        musicFiles = List;

    }
    this.SetPlayMode = function(mode) {
        playMode = mode;
    }

    this.remove = function() {
        musicFiles = [];
    }
    this.ListAdd = function(res) {
        musicFiles.push(res);
    }
    this.musicFileChange = function() {
        //  alert(musicFiles);
    }
    this.play = function(p_key) {
        for (var i = 0; i < musicFiles.length; i++) {
            var test = eval('(' + musicFiles[i] + ')')
            if (p_key == test.Id) {
                index = i;
                this.PlayCallBack();
            }
        }
    }
    this.PlayCallBack = function() {
        var Change = eval('(' + musicFiles[index] + ')');
        playingFile = Change;
        media.setAttribute("src", playingFile.File);
        media.play();
        $('#shoucang').css('background-position', '0px 0px');
        $('#shoucang').css('background-image', '');
        $('.lian span').hide();
        $('#play').hide();
        $('#stop').show();
        $('.sup span a').attr('href', '' + adress((parseInt(playingFile.Songtype)), playingFile.Id) + '').attr('target', '_blank');
        $('.sup span a').html('<strong >' + playingFile.Name + '</strong>&nbsp;');
        var id = playingFile.Id;
        $('#' + id + '').children('.playing').show();
        $('#' + id + '').siblings().children('.playing').hide();
        li = $('#' + id + ' img:first').clone(true);
        $(".img a").attr('href', 'http://' + playingFile.Songerid + '.test.com');
        setTimeout(function() {
            $('#img1').attr('src', playingFile.Singimg);
            $('#img1').attr('title', playingFile.Singer);
        }, 600);
    }
    this.get_active_song = function() {
        if (index != -1) {
            return musicFiles[index];
        }
        return null;

    }

    this.deleteList = function(key) {
        for (var i = 0; i < musicFiles.length; i++) {
            var test = eval('(' + musicFiles[i] + ')')
            if (key == test.Id) {
                index = i;
            }

        }
        if (index != -1) {
            musicFiles.splice(index, 1);

        }
    }
    //初始化
    this.init = function() {
        index = -1;       
        _this.nextMusic();

    }
}




function dataCollect(id, name, file, singimg, songtype, singer, songerid) {
    this.Id = id;
    this.Name = name;
    this.File = file;
    this.Singimg = singimg;
    this.Songtype = songtype;
    this.Singer = singer;
    this.Songerid = songerid;


}

function store(res) {
    var datastore = [];
    for (var i = 0; i < res.length; i++) {
        var p = new dataCollect(res[i].id, res[i].name, res[i].file, res[i].singerImg, res[i].SongType, res[i].singer, res[i].SongerID);
        var output = JSON.stringify(p);
        datastore.push(output);

    }
    return datastore;
}

function adress(e, f) {
 
}

html部分:

             <audio id="musicBox"  onended="mb.nextMusic()" onloadstart="mb.loadStart()" onplaying="mb.playing()" onpause="mb.pausePaly()"onerror="mb.loadError()">
  </audio>

其他省略。。。

原文地址:https://www.cnblogs.com/guozhenyp/p/2252952.html