Tilføje egen playlist til HTML5 musikafspiller

Du har jo netop dette link: http://jplayer.org/latest/demo-02/

Se deres "js" kode:


//<![CDATA[
$(document).ready(function(){

    new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, [
        {
            title:"Cro Magnon Man",
            mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
            oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
        },
    ], {
        swfPath: "../js",
        supplied: "oga, mp3",
        wmode: "window",
        smoothPlayBar: true,
        keyEnabled: true
    });
});
//]]>

Det er jo "bare" sådan noget du skal loade via js. :o)

Husk at loade jplayer og jplayer.playlist:

<script type="text/javascript" src="../js/jplayer.playlist.min.js"></script>

Dvs at jeg skal smide den kode ind i en .js-fil og i min HTML linke til det sted på min computer jeg har gemt den plugin (jplayer og jplaylist)? hvordan gør jeg det når det ikke ligger på en server? Men mit spørgsmål var også hvordan jeg kunne lave min egen playlist ud fra mit JSON array i stedet for at bruge jplaylist? Altså som bare viser tracks, uden at det egentlig bliver afspillet

Jeg ville jo gøre følgende.

Få jplayer og playlist til at virke.

Når det er på plads, så ville jeg vise alle "tracks" som du har nu.

På hvert spor / track, ville jeg så lave noget javascript, der kunne smide disse tracks ind i playlisten.
og på playlisten, skal der jo så laves en "slet" knap, hvis det ikke allerede findes.

Jeg ved godt at jeg lyder dum, men hvordan får jeg jplayer/playlist til at virke? Altså det er en plugin? Jeg har kopieret js-koden ind i en .js-fil og så skal jeg linke til det sted hvor jplayer er gemt f.eks. på mit skrivebord? Men det skal jeg vel gøre i mit HTML-dokument?

Prøv at se hvordan koden er sat sammen i demo-02 i mit indlæg #1.

Du skal dog ikke bruge alt..

Og du lyder ikke dum, du lyder bare som en der ikke ved bedre.
Jeg var selv samme sted for mange år siden, så ved hvor "dum" man lyder og føler sig. :o)

Altså inde på linket kan jeg kun finde dens kode i jplayer inspector, og den kode synes jeg ikke ser helt fuldent ud. Jeg kan ikke overskue at se den direkte kildekode, da den er alt for lang og indviklet. Men din kode ser lidt anderledes ud, hvad har du gjort der? Når du siger at jeg ikke skal bruge alt er det så fordi jeg skal bruge min egen playlist i stedet for dens?

prøv at få jplayer til at "virke" og være på din side.
Hent deres download og brug deres guide.

Hm ja okay, nok ikke så meget mere du kan hjælpe med, så jeg siger tak :) Men den guide de har skal jeg følge mange steps, der kræver at jeg har en server at ligge filerne ud på. Kan jeg sætte det sammen uden en server, men i eclipse i stedet tror du?

Selve jplayer, playlist og en side, er ren html / javascript, så det kan virke lokalt.

Okay lige nu prøver jeg at få det til at virke lokalt, men der er også en .swf-fil som jeg ikke ved hvad jeg skal gøre med. "Additionally, this allows you to easily set an important jPlayer option, the swfPath, by using the constructor option:
{ swfPath: "/js" }"
Håber ikke den er så vigtig?
Men det jeg gør er, at lægge filerne ind i mit workspace i stedet for på en server og så linke til dem med <script type="text/javascript" src="jquery.jplayer.min.js"></script>

?

swf kan også sagtens afvikles lokalt.

Jeg har vist fået det til at virke uden den swf-fil. Musikafspilleren er nemlig på min side nu ovenover listen lavet ud fra JSON. Så langt så godt ;P
Nu mangler jeg "bare" at kunne bruge denne playliste sammen med musikafspilleren. Det har jeg ingen idé om hvordan jeg gør. Kan jeg lave alle mine tracks til links, som bliver tilføjet til afspilleren når man trykker på dem? I så fald hvordan? :P

Prøv at kig på koden demo-02
Der bliver tracks tilføjet via javascript.
Selvsamme js, må du kunne kalde dynamisk.

Faldt lige over denne: http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

altså dette?:

$(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
          });
        },
        swfPath: "/js",
        supplied: "m4a, oga"
      });
    });

så hvad kan jeg skrive i stedet for den url for at den skal kunne vise mine egne tracks?

Som tidligere sagt.
Du må altså prøve lidt selv. :o)

Prøv at smid din lydfiler i samme mappe som din html og js.
Så kunne det være:

m4a: "Miaow-07-Bubble.m4a",
oga: "Miaow-07-Bubble.ogg"

altså jeg skal jo ikke selv bruge lydfiler, da afspilleren egentlig ikke som sådan skal kunne afspille dem. men vil gerne have denne kode

    var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_N",
    cssSelectorAncestor: "#jp_container_N"
    }, [
    {
    title:"Cro Magnon Man",
    artist:"The Stark Palace",
    mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
    oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
    poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
    }
    ], {
    playlistOptions: {
    enableRemoveControls: true
    },
    swfPath: "/js",
    supplied: "ogv, m4v, oga, mp3",
    smoothPlayBar: true,
    keyEnabled: true,
    audioFullScreen: true // Allows the audio poster to go full screen via keyboard
    });

til at bruge min egen JSON. burde det ikke være muligt?

Jo, det er muligt. :o)

Spørgsmålet er nok om det er muligt for dig.

Der står på siden:
The parameters can be created outside the constructor to suit your goal. In particular, the options may be common to all your instances on a page. The playlist could be generated through an AJAX call to a JSON or XML url.

    var cssSelector = { jPlayer: "#jquery_jplayer_N", cssSelectorAncestor: "#jp_container_N" };
    var playlist = []; // Empty playlist
    var options = { swfPath: "/js", supplied: "ogv, m4v, oga, mp3" };
    var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

hvor der står var playlist = arrayet, kan jeg der lave et json kald så jeg laver min playlist ud fra json?

Nemlig. :o)
Du skal bare sørge for enten at kalde din json og smide data ind i playlist eller bruge myPlaylist.add(....) pr sang.
Men det skal jo "kun" laves, når du tilføjer en sang.
Du skal jo bare vise alle dine sange på din side til at starte med.

Altså alle mine sange står jo på siden til at starte med, men dem vil jeg jo gerne have over i playlisten. Hvordan ville du gøre?

Prøv igen at kig på denne side: http://jplayer.org/latest/demo-02-jPlayerPlaylist/

Jeg har netop lige hentet denne fil: http://jplayer.org/latest/jQuery.jPlayer.2.5.0.demos.zip

Arbejd videre med filen: demo-02-jPlayerPlaylist-pf.htm

Den virker fint "lokalt" du skal "bare" tilføje: http: foran linjen:  //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Der er nogle links ala:

Miaow audio: add( {Bubble} | {Hidden} | {Tempered Song} | {Lentement} )

Se hvordan disse links er lavet:

$("#playlist-add-lentement").click(function() {
        myPlaylist.add({
            title:"Lentement",
            artist:"Miaow",
            mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
            poster: "http://www.jplayer.org/audio/poster/Miaow_640x360.png"
        });
    });

Sådanne links, skal du "bare" lave pr sang, så hopper de selv op i playlisten.

Du kan snart ikke få mere hjælp, uden jeg laver hele opgaven for dig. :o)

Tusind tak for den gode hjælp og fordi du har sat dig tid til det. Bare opret et svar, så skal jeg nok give dig de point du fortjener :) Jeg kan desværre ikke få det til at virke det du sagde jeg skulle gøre. Tror måske at problemet ligger i at jeg har fået sat min afspiller forkert sammen. Den ser heller ikke helt rigtig ud.

Nu får du ikke mere hjælp: http://damgaard-olsen.dk/exp/992756/