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

Question

我目前正在为一所盖尔学校开发一个网站。目前，他们使用 Flash 作为 Web 应用程序，我将在下面链接到该应用程序，但是我正在尝试在 HTML5 中创建/重新创建它，因为目前并非所有人都可以访问它。

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

此应用程序的链接:“http://ceres.napier.ac.uk/staff/alistair/gaelicparenthelp/ff_sets.html ”

正如您所见，单击一个按钮时，会出现更多按钮。

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

如果有人能将我引向正确的方向，我将非常感激，但我的搜索一直让我中途失败，因为它们并不正是我要找的东西。

谢谢!

Answer 1

您需要Read XML file using javascript或 jQuery 的 load 和选择器来读取 XML 文件。

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

var xml= '<ASSETS><Box ><id>1</id><url>bogsa01.xml</url><text>Bogsa1</text></Box><Box ><id>2</id><url>bogsa02.xml</url><text>Bogsa2</text></Box><Box ><id>3</id><url>bogsa03.xml</url><text>Bogsa3</text></Box><Box ><id>4</id><url>bogsa04.xml</url><text>Bogsa4</text></Box></ASSETS>';

var xmlDoc = $.parseXML( xml ); 
var $xml = $(xmlDoc);
var $box = $xml.find("Box");

$box.each(function(){
   var id = $(this).find('id').text();
   var text = $(this).find('text').text();
   var url = $(this).find('url').text();
   // From here you can do whatever you want with the data 
   $("#BoxList" ).append('<li><b>ID: </b>' +id+ '  <b>TEXT: </b> '+text+ '  <b>URL: </b> ' +url+ '</li>'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="BoxList">XML:</div>