Javascript jQuery第二次无法使用动态音频播放列表

我想能够播放上传的歌曲从动态创建的文件夹（源）类似混响，soudcloud。这是一个rails应用程序，包含以下生成的html源代码

Brad Traversy的原始教程：

问题是第一个嵌套播放中只有最新上传的歌曲。其余的没有播放。我认为jQuery无法处理后续歌曲，因为按钮处于非活动状态。 请问有什么帮助吗？编辑小提琴：

var音频；
//最初隐藏暂停
$（“#暂停”）.hide（）；
$（“#播放列表”）.hide（）；
//初始化器-播放第一首歌曲
initAudio（$（“#播放列表li:第一个孩子”）；
函数初始化音频（元素）{
var song=element.attr（'song'）；
var title=element.text（）；
var cover=element.attr（“cover”）；
var artist=element.attr（'artist'）；
//创建一个新的音频对象
音频=新音频（“媒体/”+歌曲）；
如果（！audio.currentTime）{
$（'#duration'）.html（'0.00'）；
}
$（'#audio player.title'）。文本（title）；
$（'#audio player.artist'）.text（artist）；
//插入封面图像
$（'img.cover'）.attr（'src'，'images/cover/'+cover）；
$（“#playlist li”）.removeClass（'active'）；
元素addClass（'active'）；
}
//播放按钮
$（“#播放”）。单击（函数（）{
音频播放（）；
$（“#播放”）.hide（）；
$（“#暂停”）.show（）；
美元("期间").法代因(400),；
showDuration（）；
});
//暂停按钮
$（“#暂停”）。单击（函数（）{
audio.pause（）；
$（“#暂停”）.hide（）；
$（'#play'）.show（）；
});
//停止按钮
$（'#停止'）。单击（函数（）{
audio.pause（）；
audio.currentTime=0；
$（“#暂停”）.hide（）；
$（'#play'）.show（）；
$（“#持续时间”）。淡出（400）；
});
//下一个按钮
$（“#下一步”）。单击（函数（）{
audio.pause（）；
var next=$（'#playlist li.active'）.next（）；
如果（next.length==0）{
next=$（“#播放列表李：第一个孩子”）；
}
初始化音频（下一个）；
音频播放（）；
showDuration（）；
});
}

*{
保证金：0；
填充：0；
边界：无；
大纲：无；
}
身体{
字体系列：arial；
字体大小：13px；
线高：1.5em；
颜色：#000000；
背景：url（../images/bg.png）；
}
.clearfix{
明确：两者皆有；
}
.隐藏{
显示：无；
}
#容器{
宽度：700px；
高度：100px；
背景：#eee；
溢出：自动；
保证金：0px自动；
}
#音频图像{
位置：相对位置；
溢出：隐藏；
高度：4px；
边缘底部：1px；
}
#音频信息{
文本对齐：居中；
}
#音频信息。艺术家{
字体大小：粗体；
}
.掩护{
宽度：100%；
z指数：1；
}
输入量{
宽度：95%；
左缘：2%；
-webkit外观：无！重要；
背景：#ccc；
高度：1px；
边缘底部：-15px；
}
输入#卷：：-webkit滑块拇指{
-webkit外观：无！重要；
背景：url（../images/knob.png）不重复；
高度：12px；
宽度：12px；
}
#钮扣{
宽度：95%；
显示：块；
利润上限：-15px；
左边距：23px；
溢出：自动；
}
按钮#播放{
宽度：24px；
高度：22px；
背景：url（../images/play.png）不重复；
浮动：左；
边缘顶部：15px；
}
按钮#暂停{
宽度：24px；
高度：22px；
背景：url（../images/pause.png）不重复；
浮动：左；
边缘顶部：15px；
}
按钮#停止{
宽度：24px；
高度：22px；
背景：url（../images/stop.png）不重复；
浮动：左；
边缘顶部：15px；
}
按钮#上一个{
宽度：24px；
高度：22px；
背景：url（../images/prev.png）不重复；
浮动：左；
边缘顶部：15px；
}
按钮#下一步{
宽度：24px；
高度：22px；
背景：url（../images/next.png）不重复；
浮动：自动；
边缘顶部：15px；
}
#播放列表{
列表样式类型：无；
填充：2px；
}
#播放列表李{
光标：指针；
保证金：5px；
}
#跟踪器{
位置：相对位置；
宽度：100%；
}
#播放列表li.active{
字体大小：粗体；
填充：3倍；
背景:#666；
}
#进度条{
宽度：80%；
左缘：2%；
边缘底部：40px；
利润上限：-10px；
高度：5px；
背景：url（../images/progress_bg.png）不重复；
浮动：对；
}
#进展{
背景：url（../images/progress.png）不重复；
高度：5px；
显示：内联块；
}
#持续时间{
字体系列：arial；
字体大小：13px；
线高：1.5em；
颜色：#fff；
位置：绝对位置；
利润上限：-25px；
右：10px；
填充：4px8px；
背景：#000；
边界半径：5px；
}

Title.mp3
Title2.mp3

调用

initAudio（$（'#播放列表li:first child'）

在上面的代码中，u正在传递第一个li元素，尝试更改代码，如
initAudio（$（“#playlist li”）

希望这能起作用
在哪里加载jQuery库？jQuery JavaScript库v1.9.1从我的本地机器链接到html。以下是实时代码：谢谢Aamir-这是一个错误，我已经更改了它，但仍然不起作用。嗨@Charlie，你可以将类“活动”添加到当前正在播放的类似element.addClass（“活动”）的内容中吗。它对我不起作用，你能用小提琴试试吗