1

Jplayer で JavaScript プレイリストを作成したいと考えています。これは便利で簡単なツールですが、JavaScript でコーディングしたことはありません。

このデモで使用されている JavaScript を見てください。リストを使用して MP3 および Ogg ファイルを保存します。

var myPlayList = [
    {name:"Tempered Song",mp3:"http://www.miaowmusic.com/mp3/Miaow-01-Tempered-song.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-01-Tempered-song.ogg"},
    {name:"Hidden",mp3:"http://www.miaowmusic.com/mp3/Miaow-02-Hidden.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-02-Hidden.ogg"},
    {name:"Lentement",mp3:"http://www.miaowmusic.com/mp3/Miaow-03-Lentement.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-03-Lentement.ogg"},
    {name:"Lismore",mp3:"http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-04-Lismore.ogg"},
    {name:"The Separation",mp3:"http://www.miaowmusic.com/mp3/Miaow-05-The-separation.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-05-The-separation.ogg"},
    {name:"Beside Me",mp3:"http://www.miaowmusic.com/mp3/Miaow-06-Beside-me.mp3",ogg:"http://www.miaowmusic.com/ogg/Miaow-06-Beside-me.ogg"},
];

したがって、今のところ、django テンプレート (ただし、別のテンプレート エンジンを使用することもできます) を使用してこの変数を作成します。myPlayListただし、HTML コードから MP3 の URL と Ogg vorbis の URL を取得する JavaScript 関数を使用して、このリスト ( ) を動的に作成したいと考えています。

したがって、この HTML コードから...:

<body>
    <article id="track-0">
        <h1>lorem ipsum</h1>
        <ul>
            <li><a href="...">Mp3</a></li>
            <li><a href="...">Vorbis</a></li>
            <li><a href="...">Flac</a></li>
        </ul>
    </article>

    <article id="track-1">
        <h1>lorem ipsum</h1>
        <ul>
            <li><a href="...">Mp3</a></li>
            <li><a href="...">Vorbis</a></li>
            <li><a href="...">Flac</a></li>
        </ul>
    </article>

    <article id="track-2">
        <h1>lorem ipsum</h1>
        <ul>
            <li><a href="...">Mp3</a></li>
            <li><a href="...">Vorbis</a></li>
            <li><a href="...">Flac</a></li>
        </ul>
    </article>
</body>

... このような JavaScript リストを作成する必要があります (リストの各インデックスはtrack-ID、HTML 内の を表します:

var files = [
    {mp3:"...", ogg:"..."},
    {mp3:"...", ogg:"..."},
    {mp3:"...", ogg:"..."},
];

私の醜い英語を許してください。さらに情報が必要な場合は、教えてください。

ありがとうございました。:-)

4

2 に答える 2

2

各リンクにクラスを追加します。例:

<a class="mp3_link" href="...">Mp3</a>

次に、次のようなことができます。

$("article").each(function() {
    var mp3_url = $("a.mp3_link", this).attr('href');
    // Keep going and build your data structure
 });
于 2010-03-23T21:06:06.977 に答える
2

これは多くの方法で実行できますが、次の方法が 1 つの可能性です。

var files = [];
$('article').each(function() {
    files.push({
        mp3: $('li:nth-child(1) a', this).attr('href'),
        ogg: $('li:nth-child(2) a', this).attr('href')
    });
});
于 2010-03-23T21:07:55.163 に答える