Javascript 带有XML和按钮的动态HTML5播放器

我目前正在为盖尔语学校开发一个网站。目前，他们将Flash用于web应用程序，我将在下面链接到该应用程序，但我正在尝试在HTML5中创建/重新创建它，因为目前每个人都无法访问它

该应用程序由按钮组成，所有按钮都由XML输入绘制，另一个XML文件包含每个按钮按下时播放的mp3数据。一个XML文件绘制框，另一个填充框

指向此应用程序的链接：“

正如您所看到的，当单击一个按钮时，会显示更多

我尝试过遵循HTML5媒体播放器的指南，但是我不完全理解如何读取XML文件来创建这些格式，如图所示。我也研究过树格式，但也找不到一个好的起点

如果有人能把我送到正确的方向，我会非常棒，我的搜索结果让我失望了一半，因为他们不是我想要的

谢谢

您需要使用或jQuery的

加载

和选择器来读取XML文件

对于HTML元素，最好的选择可能是利用动态元素创建。 下面是一个读取XML数据的演示：

var xml='1bogsa01.xmlBogsa12bogsa02.xmlBogsa23bogsa03.xmlBogsa34bogsa04.xmlBogsa4'；
var xmlDoc=$.parseXML（xml）；
var$xml=$（xmlDoc）；
var$box=$xml.find（“box”）；
$box.each（函数（）{
var id=$（this.find（'id'）.text（）；
var text=$（this.find（'text'）.text（）；
var url=$（this.find（'url'）.text（）；
//从这里你可以对数据做任何你想做的事情
$（“#BoxList”）.append（“
ID:”+ID+”TEXT:“+TEXT+”URL:“+URL+”
”）；
});

XML:
您需要使用或jQuery的
加载
和选择器来读取XML文件

对于HTML元素，最好的选择可能是利用动态元素创建。
下面是一个读取XML数据的演示：


var xml='1bogsa01.xmlBogsa12bogsa02.xmlBogsa23bogsa03.xmlBogsa34bogsa04.xmlBogsa4'；
var xmlDoc=$.parseXML（xml）；
var$xml=$（xmlDoc）；
var$box=$xml.find（“box”）；
$box.each（函数（）{
var id=$（this.find（'id'）.text（）；
var text=$（this.find（'text'）.text（）；
var url=$（this.find（'url'）.text（）；
//从这里你可以对数据做任何你想做的事情
$（“#BoxList”）.append（“
ID:”+ID+”TEXT:“+TEXT+”URL:“+URL+”
”）；
});

XML:
好的，我已经遇到过几次了，并且非常理解它。我正在使用的XML还处理框id和url，如下所示：Bogsa1 Bogsa2 Bogsa3 Bogsa4无意在那里回复，但是的。。。这仍然是最好的方法吗？好吧，我已经遇到过好几次了，并且相当理解它。我正在使用的XML还处理框id和url，如下所示：Bogsa1 Bogsa2 Bogsa3 Bogsa4无意在那里回复，但是的。。。这仍然是最好的方法吗？