Html5音乐播放器

代码归类 Views
Html5音乐播放器,新手可以学习学习~~超简单的html5网页音乐播放器(jquery html5音乐播放器),显示时间的html5音乐播放器,带列表功能的,支持mp3音乐,歌曲的播放~~~

Html5音乐播放器,新手可以学习学习~~超简单的html5网页音乐播放器(jquery html5音乐播放器),显示时间的html5音乐播放器,带列表功能的,支持mp3音乐,歌曲的播放~~~

var media = null;
var mucicFiles = null;
//当前正在播放的歌曲
var playingFile = null;
MusicBox = function () {
    media = document.getElementById("musicBox");
    mucicFiles = [
                   { name: "犯错", url: "http://www.yandui.com/upload/sound/2009-9-20/20_34_25_953_.mp3" },
                   { name: "天使的翅膀", url: "http://www.masradio.com.cn/uploadfile/program/uploadfile/200805/20080522090800196.mp3" },
                   { name: "无名轻音乐", url: "http://audio.ngfiles.com/88000/88260_Zanarkan_Mastered_Piano_Ve.mp3" },
                   { name: "草泥马之歌", url: "http://www.cnblogs.com" }, //错误的资源
                   {name: "相思风雨中", url: "http://www.czopen.com/club/forum/files/247.mp3" }
                   ];
    var _this = this;
    //当前正在播放的歌曲的索引
    var index = -1;   
    //播放模式
    var playMode = 1;
    //下一首
    this.nextMusic = function () {
        if (playMode == "1") {
            index += 1;
        }
        if (index == mucicFiles.length) {
            index = 0;
        }
        playingFile = mucicFiles[index];
        media.setAttribute("src", playingFile.url);
        media.play();
        $("#ul_musicList").children().css({ "background-color": "#FFF", "border": "solid 1px #EEEEEE", "color": "#000" });
        $($("#ul_musicList").children()[index]).css({ "background-color": "#2C7DE2", "border": "solid 1px #206DDF", "color": "#FFF" });

    }
    //加载
    this.loadStart = function () {
        $("#sn_status").text("加载中....");
    }
    //播放
    this.playing = function () {
        $("#sn_status").text("当前正在播放:" + playingFile.name);
    }
    //暂停
    this.pausePaly = function () {
        $("#sn_status").text("暂停:" + playingFile.name);
    }
    //加载出错
    this.loadError = function () {
        $("#sn_status").text("加载“" + playingFile.name + "”失败,可能资源不存在~");
    }
    //初始化
    this.init = function () {
        for (var a in mucicFiles) {
            $("#ul_musicList").append("
  • " + mucicFiles[a].name + "
  • "); } _this.nextMusic(); $("#slt_playMode").change(function () { playMode = $("#slt_playMode").val(); }); } } //播放指定文件 function playdemo(index) { playingFile = mucicFiles[index]; media.setAttribute("src", playingFile.url); $("#sn_status").text("当前正在播放:" + playingFile.name); media.play(); $("#ul_musicList").children().css({ "background-color": "#FFF", "border": "solid 1px #EEEEEE", "color": "#000" }); $($("#ul_musicList").children()[index]).css({ "background-color": "#2C7DE2", "border": "solid 1px #206DDF", "color": "#FFF" }); }

    调用示例:

    $(document).ready(function () { mb = new MusicBox(); mb.init(); });

    下 载 人已下载

    下载说明:

    1、解压密码:无

    2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。

    3、如果您发现文件有错,或者您有其他更好的意见、建议请给我们留言,我们会及时处理!

    4、如果您遇到什么问题,也可加入本站QQ1828984798咨询!

    *下载本站资源以及作品仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *

    评论 --
    • 消灭零回复