音乐播放器的js代码

音乐播放的主要js代码

音乐数据的数组对象

想向前端网页提供数据，并且为后面的js代码提供了音乐路径

 {
   
        ablum: "海阔天空",
        artist: "Beyond",
        id: 1,
        name: "大地",
        path: "musics/1592373302464.mp3",
        size: 4147913,
        style: "摇滚",
        uptime: 1592373302000
    },
    {
   
        ablum: "xxx",
        artist: "GALA ",
        id: 2,
        name: "追梦赤子心",
        path: "musics/1592373330188.mp3",
        size: 8357216,
        style: "摇滚",
        uptime: 1592373330000
    },
    {
   
        ablum: "123",
        artist: "筷子兄弟",
        id: 3,
        name: "父亲",
        path: "musics/1592373363687.mp3",
        size: 12050851,
        style: "怀旧",
        uptime: 1592373363000
    },
    {
   
        ablum: "xxx",
        artist: "Bruno Mars ",
        id: 4,
        name: "Just The Way You Are",
        path: "musics/1592383891287.mp3",
        size: 3602925,
        style: "摇滚",
        uptime: 1592383891000
    },
    {
   
        ablum: "xxx",
        artist: "Jason Chen",
        id: 5,
        name: "童话",
        path: "musics/1592383916578.mp3",
        size: 4143707,
        style: "流行",
        uptime: 1592383916000
    },

全局变量

//创建音频播放器对象
var player =document.createElement('audio');
//设置当前正在播放的歌曲的索引
var currentIndex=0;
//声明一个标记，记录歌曲的播放状态
var isplay=false;

自调用函数

主要功能是通过循环遍历使用html字符串向前端动态的添加音乐数据，并初始化播放源（currentIndex标记）

(function() {
   
//绑定数据到页面中
    var html = '';
//循环遍历歌曲列表，根据歌曲数目在页面生成对应的html代码
    for (var i = 0; i < musics.length; i++) {
   
        var m = musics[i];
        //根据循环的次数创建对应的歌曲项
        html += `<tr class="music-item" data-index="