HTML5 music player gesucht- verständlich integrierbar

C

clipnotic

..
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.
 
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:
 
leedoeslala schrieb:
http://lmgtfy.com/?q=html5+audio+player
Zum Vergrößern anklicken....

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:

clipnotic schrieb:
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.
Zum Vergrößern anklicken....

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:
 
leedoeslala schrieb:
<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:
Zum Vergrößern anklicken....

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:

clipnotic schrieb:
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.
Zum Vergrößern anklicken....

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!
 
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:
 
leedoeslala schrieb:
ich bin raus, aber viel glück bei der suche nach jemand der dich bedient :lol:
der ton macht die Musik und so :kaffee:
Zum Vergrößern anklicken....

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?
 
leedoeslala schrieb:
:lollo: selbst schreiben kannst du ja offensichtlich nicht, mimimi :mrgreen:
anstatt unqualifiziert rumzulabern hätteste ja auch mal den code Schnipsel ausprobieren können, funzt auch wunderbar mit video wenn man weiß wie ^^
Zum Vergrößern anklicken....

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

clipnotic schrieb:
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.
Zum Vergrößern anklicken....

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:
 
^^

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>
 
dbra schrieb:
Bitte den Thread nicht zerlabern.


Danke.
Zum Vergrößern anklicken....

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:
 
leedoeslala schrieb:
^^

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>
Zum Vergrößern anklicken....

Du erwartest jetzt wirklich nicht, dass ich dazu was sage oder? Wo hast das jetzt raus kopiert? :lollo:
 
dbra schrieb:
@cliptronic: Ich glaube, er versucht dir zu sagen, daß du dir die Elemente, die dir fehlen, selbst hinzufügen sollst.
Zum Vergrößern anklicken....

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:

clipnotic schrieb:
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.
Zum Vergrößern anklicken....
 
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:
 
leedoeslala schrieb:
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:
Zum Vergrößern anklicken....

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:
 
*hust* ich hätte gerne einen html5 audio player ohne html5 und so :sowhat:
geh doch javascripte an die richtige stelle kopieren :lol:
 
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.....
 
mink99 schrieb:
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.....
Zum Vergrößern anklicken....

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?????
 
dbra schrieb:
Naja, ein bißchen formattierter Text. Das Event-Handling fehlt noch...
Zum Vergrößern anklicken....
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:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.


Neueste Beiträge

News

Zurück
Oben