HTML5 music player gesucht- verständlich integrierbar

Dieses Thema im Forum "Media 2.0" wurde erstellt von clipnotic, 19. Juni 2013.

  1. clipnotic

    clipnotic bin angekommen

    mittlerweile gibt es ja das <audio> tag direkt in HTML5, mit dem man direkt verschiedene Musikformate integrieren kann. Aber das reicht mir nicht und deshalb suche ich einen besseren Musikplayer für eine meiner Webseiten. Es gibt auch schon einige, die man beim Googlen findet aber irgendwie raff ich bei all denen null wie man da nun Schritt für Schritt vorgeht die zu integrieren.

    Daher suche ich:

    - einen HTML5 Player für Single Songs
    - einen HTML5 Player mit Playlist
    - gerne auch ein Videoplayer
    - ordentliche Anleitung wie diese zu integrieren sind
    - keine Programmiererwüste sondern einfaches / verständliches Handling
    - die Songs werden NUR auf meinem eigenen Webspace abgelegt, also KEIN Fremdhosting, KEINE Musik Plattform
    - Preis ist mir egal, aber ich will nur einmal zahlen und jederzeit die Songs ändern können

    Ich bin durchaus in HTML bewandert und weiß auch wie man CSS oder Javascript Codes in eine Webseite integriert aber ein super Webprogrammierer bin ich nicht, also ich brauch was, dass so halbwegs auf dem Niveau zu integrieren ist, wie es eben auch die vielen Flash Player sind, die man jahrelange problemlos integrieren konnte.
     
  2. Anonymous

    Anonymous Guest

    http://lmgtfy.com/?q=html5+audio+player

    such dir halt einen der dir gefällt und guck dann einfach in den code der webseite :opa:
    im simpelsten fall so:

    <html>
    <body>
    <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>
    </body>
    </html>
    :lol:
     
  3. clipnotic

    clipnotic bin angekommen

    OK, und Dir empfehl ich mal wirklich folgendes, falls Du das überhaupt hin kriegst:

    http://www.amazon.de/s/ref=nb_sb_noss_1 ... sen+lernen

    Und wenn Du das kannst in ein paar Jahren, dann liest nochmal das:

    Ich such Leute hier, die Ahnung davon haben und bereits einen gefunden haben, der auch wirklich was taugt und meinen Anforderungen entspricht und nicht nur so ne Frickellösung ist, weils wieder for free sein muss. Und mit reinem Quellcode rauskopieren wird das nicht unbedingt funzen ...

    Leute mit Ahnung sind welche, die nicht so sind wie Du Dich grad gibst und so, denn die haben auch begriffen, dass "Geh Googlen für Doofe Links, Foren Threads zerstören, direkt provozieren und Google zum dem gemacht haben was es heute ist!" :nihao:
     
  4. clipnotic

    clipnotic bin angekommen

    Gerne nochmal: - lerne lesen oder schweige bitte bei meinen Threads zumindest künftig:
    http://www.amazon.de/s/ref=nb_sb_noss_1 ... sen+lernen

    DENN siehe wieder mein Eingangspost:

    Und jetzt schaust Dir Deinen Code mal an, was Du da genau eben verwendet hast ... :selfhammer:

    Wer nicht lesen will oder kann, hat in Foren nichts verloren, denn da gehts halt echt um Buchstaben! :nihao:

    Und wer sich mal wieder fragt, warum ich so fies antworte ... ich denke diesmal erklärt sich das hoffentlich von selbst, solche regen mich einfach auf und ich gehör zu denen die das dann auch offen sagen!
     
  5. Anonymous

    Anonymous Guest

    wat soll denn an dem schnpsel falsch sein? du wolltest doch einen player :mrgreen:
    ich bin raus, aber viel glück bei der suche nach jemand der dich bedient :lol:
    der ton macht die Musik und so :kaffee:
     
  6. clipnotic

    clipnotic bin angekommen

    Echt, tu Dir nen Gefallen mit folgendem:
    http://www.amazon.de/s/ref=nb_sb_noss_1 ... sen+lernen

    Wenn man das einmal lernt, hat man was ultimatives fürs Leben! :supi:

    Siehst es jetzt wenigstens ein oder soll ich gleich fragen, ob man den Thread komplett rauslöscht hier, weil er zur Müllhalde wird? Muss ja nicht sein oder?
     
  7. clipnotic

    clipnotic bin angekommen

    Ja genau, das sagt derjenige, der nicht liest aber mit Google für Doofe Links ankommt ... nur gut, dass andere hier noch super lesen können, steht ja alles da! ;-)

    Und danke, dass Du raus bist, das find ich super von Dir !! :supi:

    Also könnte man den Thread jetzt bitte nochmal normal beginnen?
     
  8. mink99

    mink99 bin angekommen

  9. clipnotic

    clipnotic bin angekommen

    OK danke, den probier ich gleich mal aus ... !
     
  10. virtualant

    virtualant eigener Benutzertitel

  11. clipnotic

    clipnotic bin angekommen

    Scheitert leider schon daran, dass ich die Javascript Datei nicht hochgeladen kriegt, verweigert mir mein Account ... die Shockwave Datei ist kein Problem die geht ...
     
  12. clipnotic

    clipnotic bin angekommen

    Ja den hab ich auch schon runter geladen und der sieht lustig aus ... aber das ist einer von denen, bei dem ich bei der Installationshilfe null raffe wie man da nun beginnt und vorgehen muss ... ??
     
  13. clipnotic

    clipnotic bin angekommen

    Ja wie gesagt, ich glaub das mit den Buchstaben ist bei Dir so ein Problem aber ich kopier es Dir nochmal:

    Ich übersetz Dir den Satz mal, vielleicht ist er zu schwer für Dich?

    Dein Codebeispiel, was nach meinem Post folgte, IST diese <audio> tag Funktion. Und wie Du an den Buchstaben siehst, die ich vor Dir schrieb, hab ich das ja schon längst ausprobiert und sogar selbst gebaut, weil das Kinderkram ist und deshalb reicht es mir nicht. Die Gründe, warum mir diese Lösung nichts bringt, brauch ich so nem großen Programmierer wie Dir ja nicht sagen, denn Du bist ja voll im Bilde und so .. :lollo:
     
  14. Anonymous

    Anonymous Guest

    ^^

    so und hier nochmal in der Kindergarten version, jetzt auch mit scheren die nicht schneiden

    Code:
    <div id="cwrap">
        <div id="nowPlay">
            <h3 id="npAction">Paused:</h3>
            <div id="npTitle"></div>
        </div>
        <div id="audiowrap">
            <div id="audio0">
                <audio id="audio1" controls="controls" width="350">
                    du nix audio weil scheiß browser^
                </audio>
            </div>
            <div id="extraControls">
                <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button>
            </div>
        </div>
        <div id="plwrap">
            <div class="plHead">
                <div class="plHeadNum">Track</div>
                <div class="plHeadTitle">Title</div>
                <div class="plHeadLength">Length</div>
            </div>
            <ul id="plUL">
                <li>
                    <div class="plItem">
                        <div class="plNum">1</div>
                        <div class="plTitle">this</div>
                        <div class="plLength">0:55</div>
                    </div>
                </li>
                <li>
                    <div class="plItem">
                        <div class="plNum">2</div>
                        <div class="plTitle">this2</div>
                        <div class="plLength">0:37</div>
                    </div>
                </li>
                <li>
                    <div class="plItem">
                        <div class="plNum">3</div>
                        <div class="plTitle">this3</div>
                        <div class="plLength">1:05</div>
                    </div>
                </li>
                <li>
                    <div class="plItem">
                        <div class="plNum">4</div>
                        <div class="plTitle">this4</div>
                        <div class="plLength">0:40</div>
                    </div>
                </li>
                <li>
                    <div class="plItem">
                        <div class="plNum">5</div>
                        <div class="plTitle">Random music</div>
                        <div class="plLength">0:59</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
     
  15. clipnotic

    clipnotic bin angekommen

    Ne, das muss jetzt sein hier. Weil der muss das jetzt bis in alle Ecken rausfordern. Das ist halt die Kehrseite an nem frei für alles Forum ... aber die Vorteile überwiegen zum Glück ja doch, da kann man sowas schon mal aushalten! :mrgreen:
     
  16. clipnotic

    clipnotic bin angekommen

    Du erwartest jetzt wirklich nicht, dass ich dazu was sage oder? Wo hast das jetzt raus kopiert? :lollo:
     
  17. dbra

    dbra Weltenbummler - Superstar - Frauenheld

    @cliptronic: Ich glaube, er versucht dir zu sagen, daß du dir die Elemente, die dir fehlen, selbst hinzufügen sollst.
     
  18. clipnotic

    clipnotic bin angekommen

    Ich weiß genau was er versucht mir zu sagen und auch seine Copy Code Lösung mit der man diesen Standard HTML5 Single Player in ne Playlist Version verwandelt ist ja schön und gut, aber ich such nicht nach nem Frickelgetue, sondern nach nem optisch dicken und gut anpassbaren Player. Beim HTML5 Standard Player muss man nämlich auch wissen, dass der in verschiedenen Browser sehr unterschiedlich angezeigt wird und so nen Mist will ich nicht haben zum Beispiel ... das kriegt man natürlich nicht raus, wenn man nur rum kopiert .. ;-)

    Und deshalb schrieb ich auch, dass ich nicht so ne lala <audio> tag Lösung will ... aber das kapiert er von Beginn an nicht ... obwohl es in der ersten Zeile meines Eingangs Postes steht:

     
  19. Anonymous

    Anonymous Guest

    html macht man mit css hübsch :idea:
    lol, und wenn du in jedem browser das gleiche siehst dann hast du web nicht verstanden :invader2:
     
  20. clipnotic

    clipnotic bin angekommen

    Echt jetzt, wow, was Du alles weißt, jetzt bin ich aber echt baff ... na dann mach das mal mit CSS mit deinem <audio> Gepfusche und bitte auch so, dass der Standard Player dann auf ALLEN Browser gleich aussieht .. :lollo:

    HA HA, DU hast es anscheinend wirklich verstanden wie das so funzt alles ... :lollo:
     
  21. Anonymous

    Anonymous Guest

    *hust* ich hätte gerne einen html5 audio player ohne html5 und so :sowhat:
    geh doch javascripte an die richtige stelle kopieren :lol:
     
  22. mink99

    mink99 bin angekommen

    Der Code ist gar nicht so schlecht...

    Irgendwo muss es jemanden geben, der den ganzen JavaScript code schreibt. Alle anderen kopieren. Ich auch , ist halt so.....
     
  23. clipnotic

    clipnotic bin angekommen

    Ja der Code ist nicht schlecht, ist ne gute Herangehensweise, also gute Frickelei ... aber ich hab hier gefragt, ob Jemand nen dick designten und super handelbaren HTML5 Player weiß und nun muss ich mir so nen verdammten Scheißdreck anhören, was soll denn das hier bitte??

    Und ich hab auch gesagt, der darf gerne was kosten und es muss keine Free Lösung sein!

    Und ich weiß das Leute das programmieren müssen erst mal und dass das was wert ist auch, ich leb unter anderem davon Datenbanken zu programmieren und weiß dass das Arbeit ist!

    Warum kann man ne Frage nicht einfach normal beantworten?????
     
  24. dbra

    dbra Weltenbummler - Superstar - Frauenheld

    Naja, ein bißchen formattierter Text. Das Event-Handling fehlt noch...
     
  25. Anonymous

    Anonymous Guest

    Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <script type="text/javascript">
                jQuery(function($) {
                    var supportsAudio = !!document.createElement('audio').canPlayType;
                   if(supportsAudio) {
                        var index = 0,
                        playing = false;
                        mediaPath = '/blah/blah/blah/audio/',
                        extension = '',
                        tracks = [
                            {"track":1,"name":"this","length":"00:55","file":"xxxxxx"},
                            {"track":2,"name":"this2","length":"00:37","file":"xxxx"},
                            {"track":3,"name":"this3","length":"01:05","file":"xxxxxx"},
                            {"track":4,"name":"this4","length":"00:40","file":"xxxx"},
                            {"track":5,"name":"Random","length":"00:59","file":"xxx"}
                        ],
                        trackCount = tracks.length,
                        npAction = $('#npAction'),
                        npTitle = $('#npTitle'),
                        audio = $('#audio1').bind('play', function() {
                            playing = true;
                            npAction.text('Now Playing:');
                        }).bind('pause', function() {
                            playing = false;
                            npAction.text('Paused:');
                        }).bind('ended', function() {
                            npAction.text('Paused:');
                            if((index + 1) < trackCount) {
                                index++;
                                loadTrack(index);
                                audio.play();
                            } else {
                                audio.pause();
                                index = 0;
                                loadTrack(index);
                            }
                        }).get(0),
                                           btnPrev = $('#btnPrev').click(function() {
                            if((index - 1) > -1) {
                                index--;
                                loadTrack(index);
                                if(playing) {
                                    audio.play();
                                }
                            } else {
                                audio.pause();
                                index = 0;
                                loadTrack(index);
                            }
                        }),
                        btnNext = $('#btnNext').click(function() {
                            if((index + 1) < trackCount) {
                                index++;
                                loadTrack(index);
                                if(playing) {
                                    audio.play();
                                }
                            } else {
                                audio.pause();
                                index = 0;
                                loadTrack(index);
                            }
                        li = $('#plUL li').click(function() {
                            var id = parseInt($(this).index());
                            if(id !== index) {
                                playTrack(id);
                            }
                        }),
                        loadTrack = function(id) {
                            $('.plSel').removeClass('plSel');
                            $('#plUL li:eq(' + id + ')').addClass('plSel');
                            npTitle.text(tracks[id].name);
                            index = id;
                            audio.src = mediaPath + tracks[id].file + extension;
                        },
                        playTrack = function(id) {
                            loadTrack(id);
                            audio.play();
                        };
                        if(audio.canPlayType('audio/ogg')) {
                            extension = '.ogg';
                        }
                        if(audio.canPlayType('audio/mpeg')) {
                            extension = '.mp3';
                        }
                        loadTrack(index);
                    }
                    });
                });
            </script>
    aufhübschen müsst ihr aber selbst :)
    wenn man nicht so arrogant gewesen wäre und hätte den ersten geposteten link nicht ignoriert, hätte man ähnliches auch selbst in einer minute finden können :mrgreen:
     
  26. dbra

    dbra Weltenbummler - Superstar - Frauenheld

    CSS fehlt noch... :mrgreen:
     
  27. Anonymous

    Anonymous Guest

    :lollo:
    jetzt nimmst du ihn aber auf die schippe - nicht ich :)
     

Diese Seite empfehlen