XMLとボタンを備えたダイナミックHTML5プレーヤー

Question

現在、私はゲール語の学校のウェブサイトを開発中です。現在のところ、FlashをWebアプリケーションに使用していますが、これについては後で説明しますが、現時点では誰もアクセスできないHTML5で作成/再作成しようとしています。

アプリケーションはボタンで構成され、すべてがXML入力で描画され、別のXMLファイルには各ボタンが押されたときに再生されるmp3データが含まれます。 1つのXMLファイルはボックスを描画し、もう一方のXMLファイルはそれらを描画します。

このアプリケーションへのリンク：1、ボタンがクリックされたとき、あなたが見ることができるように「http://ceres.napier.ac.uk/staff/alistair/gaelicparenthelp/ff_sets.html」

、より多く表示されます。

私はHTML5メディアプレーヤーのための以下のガイドを試しましたが、これらのフォーマットを作成するためのXMLファイルの読み方を完全に理解していません。私は木のフォーマットも調べましたが、どちらかを始めるには良い場所を見つけることができません。

誰かが正しい方向に私を送ることができたら、私は非常に魅力的だと思います。私の検索では、私が探しているものとまったく同じように途中で止めています。

ありがとうございます！

Answer 1

XMLファイルを読むには、Read XML file using javascriptまたはjQueryのloadとセレクタが必要です。

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>