Suche einen HTML 5 Free Musik Player

[PC-Gonzo]

Hallo,

kennt einer von euch einen guten Free Music Player für HTML 5, den man in seiner Homepage einbauen kann?
Mein alter funktioniert nicht mehr, da er nur mich Shockwave lief. Außerdem konnte man nur die Titel vor -und zurückschalten und hatte keine richtige Playliste gehabt.
Ich habe z.B. den Codebase HTML5 Music Player gefunden, doch bekommen den nicht heruntergeladen. Dann den MooTools Audio Player, doch da scheint es seit 2014 nicht mehr weiter zugehen. Bei dem Experiment: HTML5 Music Player habe ich das Problem, dass da keine Readme dabei ist, wie ich ihn einbinden bzw. einbetten kann. Ich habe vom Coden allgemein keine so große Ahnung. Ich benutze zwar den KompoZer. Dennoch verwirrt mich es immer, wenn ich diese ganzen Befehlsätze sehe.

 

[grill]

Nur um das klarzustellen. Die Musiktitel die der Player abspielen soll, liegen auf deinem Server?

 

[PC-Gonzo]

Ja, die liegen auf meinem Webspace.

 

[DeusoftheWired]

Das Schöne an HTML5 ist ja gerade, daß du keinen externen Murks mehr einzubinden brauchst. Jeder Browser, der die HTML5-Eigenschaften für Audio unterstützt, kann ohne Erweiterung Musik wiedergeben.

https://www.w3schools.com/html/html5_audio.asp

 

[PC-Gonzo]

Okay, aber das scheint ja nur für einen Song zu funktionieren. Doch ich bräuchte einen Player mit einer Playlist, weil ich habe mehrere Songs auf meinem Webspace. Sonst müsste ich den einzelnen Player mehrmals auf meiner Seite einbinden und dann sieht man nur noch lauter Audio Player. Das ist nicht so der Burner.

 

[Madman1209]

Hi,

ist es wirklich so schwierig, nach "html5 audio player with playlist" zu googeln? Ich finde da auf Anhieb ein explizites Codebeispiel auf CodePen sowie etliche CodeCanyon Angebote und "Best HTML5 Audioplayers" Seiten.

"Free", also kostenlos, bedeutet in 99% der Fälle, das du ein wenig Eigenleistung bringen musst. Das passt in meinen Augen nicht zu deiner Aussage "Ich habe vom Coden allgemein keine so große Ahnung".

Gerade das CodePen Beispiel bietet eine saubere Trennung in Bezug auf den Code. Wenn das auch nicht gewünscht ist oder die Fähigkeiten dazu fehlen sind ein paar Euro für ein fertiges Exemplar von CodeCanyon oder vergleichbaren Seiten, die in der Regel eine prima Dokumentation und im Zweifel auch Support mitbringen, sicher nicht schlecht investiert.

Sofern du ein konkretes Problem mit einer Implementierung hast frag gerne, aber so allgemeine Fragen kann man in einer Sekunde mit Eigenleistung bei Google völlig problemlos klären - das geht schneller als den Thread hier zu eröffnen.

VG,
Mad

 

[PC-Gonzo]

Wie gesagt, ich habe vom Coden keine große Ahnung z.B. von HTML. Ich wusste nicht mal, dass man bei HTML5 einfach nur noch einige spezielle Befehlsätze eingibt, um einen Audioplayer zu erhalten. Ich kenne nur die alten Shockwave Player, die man sich extra runterladen und sie auf der Homepage einbetten musste (was damals für mich ein Krampf war).
Ich habe auch gestern zum Beispiel diese beide gefunden: 3D Media Cube Media Player und Music Player UI Design und hatte mich gewundert wo man die runterladen kann.
Hätte ich dieses Thema nicht eröffnet, hätte ich nicht erfahren, dass man HTML5 Codes einefach so reinklatschen kann.

Und ich habe vom Coden keine große Ahnung. Obwohl ich mit dem KompoZer arbeite, muss doch ab un zu mal auf den "Quelltext" umschalten und wenn ich diese ganzen Wirrwarr aus Befehlsätzen sehe, ohne Quatsch, dann bekomme ich eine Macke, dann fühle ich mich überfordert.
Wenn ich allgemein coden könnten (HTML, C++ und so weiter), würde meine Homepage profesioneller ausehen und ich würde mir auch einige Tools programmieren, zum Beispiel wie ich wieder eine VST zum Funktionieren bekomme.

EDIT: der scheint ganz ok zu sein. https://codepen.io/maskit_jr/pen/MbNwrN
Nur das in einer Tabelle einzubinden, da komme ich nicht klar und wie erstell ich eine Playlist?
Ich glaube das hat was mit dem CSS zu tun.

 

[PC-Gonzo]

Nee, ich bekomme es irgendwie nicht so hin, so wie es auf dem Bild aussieht.


Bei mir ist dieses Malheur zu sehen.


Den HTML5 Script im Spoiler habe ich eingefügt. Dort finde ich nicht mal die Zeilen wo man die MP3 Dateinen eintagen kann. Zum Beispiel in meinem Fall <source src="music/computerbase.mp3" type="audio/mpeg">
In dem Code steht was von:

<div class="player_playlist">
<div class="player_playlist_list jAudio--playlist">
<!-- <div class="player_playlist_item">

Ja, wo ist die Playlist? Weil ich denke in der Playlist muss ich die Pfade der MP3 Dateinen eintragen.

Spoiler

<div class="player jAudio">

  <audio></audio>

  <div class="player_body">

    <div class="hamburger-menu">

      <div class="bar"></div>

    </div>

    <div class="nav_menu">

      <div class="nav_list">

        <div class="nav_item">

          <p>Developed by:</p>

          <a href="https://www.linkedin.com/in/vladislav-kubyshkin-b15b18128" target="_blank">Vladislav Kubyshkin</a>

        </div>

        <div class="nav_item">

          <p>Template designed by:</p>

          <a href="https://dribbble.com/rezashintia" target="_blank">Reza Shintia Dewi</a>

        </div>

      </div>

    </div>


    <div class="player_playlist">

      <div class="player_playlist_list jAudio--playlist">

        <!--         <div class="player_playlist_item">

          <div class="song_block">

            <h6>Song name</h6>

            <p>Song artist</p>

          </div>

          <div class="song_time">

            <div>0:00</div>

          </div>

        </div>

        <div class="player_playlist_item">

          <div class="song_block">

            <h6>Song name</h6>

            <p>Song artist</p>

          </div>

          <div class="song_time">

            <div>0:00</div>

          </div>

        </div>

        <div class="player_playlist_item">

          <div class="song_block">

            <h6>Song name</h6>

            <p>Song artist</p>

          </div>

          <div class="song_time">

            <div>0:00</div>

          </div>

        </div>

        <div class="player_playlist_item">

          <div class="song_block">

            <h6>Song name</h6>

            <p>Song artist</p>

          </div>

          <div class="song_time">

            <div>0:00</div>

          </div>

        </div>

        <div class="player_playlist_item">

          <div class="song_block">

            <h6>Song name</h6>

            <p>Song artist</p>

          </div>

          <div class="song_time">

            <div>0:00</div>

          </div>

        </div>

        <div class="player_playlist_item">

          <div class="song_block">

            <h6>Song name</h6>

            <p>Song artist</p>

          </div>

          <div class="song_time">

            <div>0:00</div>

          </div>

        </div>

        <div class="player_playlist_item">

          <div class="song_block">

            <h6>Song name</h6>

            <p>Song artist</p>

          </div>

          <div class="song_time">

            <div>0:00</div>

          </div>

        </div>

        <div class="player_playlist_item">

          <div class="song_block">

            <h6>Song name</h6>

            <p>Song artist</p>

          </div>

          <div class="song_time">

            <div>0:00</div>

          </div>

        </div> -->

      </div>

    </div>


    <div class="player_fade"></div>

    <div class="player_content">

      <div class="player_header">

        <div class="container-fluid">

          <div class="row">

            <div class="col-xs-2">

              <div class="back_btn"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>

            </div>

            <div class="col-xs-8">

              <div class="header_name text-center" id="nowPlay">

                <span id="npAction">PAUSED...</span>

              </div>

            </div>

          </div>

        </div>

      </div>

      <div class="album_wrap">

        <div class="no_album_img"><div class="jAudio--thumb"></div></div>

      

      </div>

      <div class="song_playing text-center jAudio--details">

        <!--         <div class="song_name"><span id="npName">Hi Dribbble!</span></div>

        <div class="artist_name"><span id="npArtist">Reza Shintia Dewi</span></div> -->

      </div>

      <div class="timeline_wrap">


        <!--         <div class="timeline">

          <div class="line_played"></div>

          <div class="full_line"></div>

        </div> -->

        <div class='timeline jAudio--progress-bar'>

          <div class='jAudio--progress-bar-wrapper'>

            <div class='line_played jAudio--progress-bar-played'>

              <span class='jAudio--progress-bar-pointer'></span>

            </div>

            <div class='full_line'></div>

          </div>


        </div>

        <div class="time_of_song jAudio--time">

          <div class="container-fluid">

            <div class="row">

              <div class="col-xs-2">

                <span class="time_played jAudio--time-elapsed">00:00</span>

              </div>

              <div class="col-xs-2 col-xs-offset-8">

                <span class="full_time jAudio--time-total">00:00</span>

              </div>

            </div>

          </div>

        </div>

      </div>

      <div class="player_btns jAudio--controls">

        <div class="container-fluid">

          <div class="row">

            <div class="col-xs-2">

              <div class="random_btn text-center jAudio--control" id="random"><span class="glyphicon glyphicon-random" aria-hidden="true"></span></div>

            </div>

            <div class="col-xs-2">

              <div class="prev_btn text-center jAudio--control jAudio--control-prev" id="btnPrev" data-action='prev'><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></div>

            </div>

            <div class="col-xs-3">

              <div class="shadow_btns play_btn text-center jAudio--control jAudio--control-play" id="play" data-action='play'>

                <div class="play_circle"><span class="glyphicon glyphicon-play" id="play_circle" aria-hidden="true"></span></div>

              </div>

            </div>

            <div class="col-xs-2">

              <div class="next_btn text-center jAudio--control jAudio--control-next" id="btnNext" data-action='next'><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></div>

            </div>

            <div class="col-xs-2">

              <div class="repeat_btn text-center jAudio--control" id="repeat"><span class="glyphicon glyphicon-retweet" aria-hidden="true"></span></div>

            </div>

          </div>

        </div>

      </div>

    </div>

    <div class="waves">

      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275 223.7" style="enable-background:new 0 0 275 223.7;" xml:space="preserve">

        <style type="text/css">

          .st0{fill:url(#SVGID_1_);}

          .st1{fill:url(#SVGID_2_);}

          .st2{fill:url(#SVGID_3_);}

        </style>

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="137.5" y1="-19.8534" x2="137.5" y2="92.9036">

          <stop  offset="0.104" style="stop-color:#FF8FCF;stop-opacity:0"/>

          <stop  offset="1" style="stop-color:#FF8FCF;stop-opacity:0.7"/>

        </linearGradient>

        <path class="st0" d="M258.3,68c-21.8-6.7-21.5-47.8-31-48.3c-15.4-0.9-26.7,107.3-47.7,108c-16.6,0.6-26.8-67-46.7-66.3

          c-14.7,0.5-20,37.9-31.3,37.3c-18.2-0.9-24-98.7-36-98.7C54.7,0,49.5,82,36,82.3C25.4,82.6,18,32.1,8.3,33C3.2,33.5,0.7,47.8,0,51.7

          v172h275v-158C270.3,67.9,265,70,258.3,68z"/>

        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="137.5" y1="26.8924" x2="137.5" y2="179.8649">

          <stop  offset="0" style="stop-color:#33D4FA;stop-opacity:0"/>

          <stop  offset="1" style="stop-color:#33D4FA;stop-opacity:0.7"/>

        </linearGradient>

        <path class="st1" d="M261.8,94.7c-19.3,3.2-28.2-24.1-48.5-24.3c-22.5-0.2-29.2,33.3-47.3,32.2c-24.6-1.5-32.5-64.7-52-64.2

          C98.1,38.8,92.6,81,77.3,80.8c-16.6-0.2-25.5-50.3-36-49C29.8,33.3,29.8,95.4,17,96.5c-4.7,0.4-7-7.8-17-9.8v137h275V87.4

          C271.7,90.5,267.5,93.7,261.8,94.7z"/>

        <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="137.5" y1="6.0051" x2="137.5" y2="144.9296">

          <stop  offset="3.960396e-02" style="stop-color:#33D4FA;stop-opacity:0"/>

          <stop  offset="1" style="stop-color:#00B2FA"/>

        </linearGradient>

        <path class="st2" d="M275,223.7V87.8c-6.2,4.4-15.4,9.1-26,8.9c-29.2-0.7-36.9-39.1-61.2-38.7c-22.1,0.4-29.1,32.4-46,30.3

          c-22.8-2.8-26.7-63.5-42.2-63.7c-16.5-0.1-25.2,68.9-42,68.5c-13.7-0.3-22.4-46.7-32.5-45c-4.3,0.8-8.1,10.3-10.7,16.8

          C12.3,70.5,11.7,74.4,8,79c-2.7,3.4-5.8,5.4-8,6.7v138H275z"/>

        </svg>

    </div>

  </div>

</div>


<div id="preloader">

  <div id="status">

     <div class="spinner">

      <div class="rect1"></div>

      <div class="rect2"></div>

      <div class="rect3"></div>

      <div class="rect4"></div>

      <div class="rect5"></div>

    </div>

  </div>

</div>

 

[DeusoftheWired]

Das Einfügen der Codeschnipsel über die richtige Sprache erleichtert anderen Nutzern des Forums die Fehlersuche durch das Einfärben um einiges. Entweder über den WSYIWYG-Editor:

oder mit

[CODE=html]blablabla[/CODE]

im Reintexteditor.

 

[PC-Gonzo]

Das Einfügen der Codeschnipsel über die richtige Sprache erleichtert anderen Nutzern des Forums die Fehlersuche durch das Einfärben um einiges. Entweder über den WSYIWYG-Editor:

Anhang anzeigen 1053727

oder mit

[CODE=html]blablabla[/CODE]

im Reintexteditor.

ok, habe ich geändert.

 

[DeusoftheWired]

@Kai-Q Gut so! Jetzt noch die Vollzitate weglassen und es ist perfekt. Ein @Benutzername reicht, wenn du Bezug auf den Beitrag direkt über dir nimmst.

 

[PC-Gonzo]

Mal eine Frage. Wie soll mir das jetzt bei meinem Problem weiter helfen, wenn mir jemand erklärt, wie ich das Forum benutzen soll? 🤔
Okay, für das nächste Mal kann ich es mir vormerken.

 

[DeusoftheWired]

Soll es gar nicht. Das hat mit dem Problem nichts zu tun und wurde in der Funktion eines Moderators geschrieben, nicht in der eines normalen Forumsteilnehmers wie in #4.

 

[cumulonimbus8]

Da sich mein musiklisches Empfinden auf den Essensgong bescränkt 😇 habe ich es nicht mit Play-Lists.

Also würde ich Google anstrengen, mit passenden Stichworten wie HTML5 PLAYLIST, und Ausschau nach kompletten Codeblöcken (Codebeispielen) halten die ich dann austeste.
Dümmer würde ich mich nicht stellen.

CN8

 

[PC-Gonzo]

Ich habe mitlerweile herausgefunden, dass ich für den Audio Player v 1.0 den CSS und JavaScript mit einbinden muss, der CSS Code behinhaltet die Grafiken und der JavaScript ist für die Playliste zuständig.
Aber, wenn ich mir die HTML5 Befehlsätze anschauen, finde ich nirgendwo den Pfad und die Bezeichnungen für die beiden anderen Codes.
Ich habe auf einer Seite gesehen, dass für Java die Datei mit *.js endet. Also z.B. music.js oder playlist.js und für CSS gilt das gleiche. Dort endet es mit *.css z.B. für body.css oder style.css.
Doch wie gesagt, ich finde nirgendwo einen Hinweis wie ich sie bennen soll und wo ich hinpacken soll oder wie ich sie überhaupt einbinden soll.

 

[Madman1209]

Hi,

sorry ich muss jetzt mal ein paar Dinge klarstellen:

• HTML ist eine Textbeschreibungssprache, da gibt es keinen "Befehlssatz"
• Java kommt hier nirgends vor, sondern Javascript
• willst du wirklich eine Seite online stellen, die du ohne jegliche Kenntnisse programmiert hast?

Das ist nicht böse gemeint, aber blind Code kopieren, nicht verstehen was genau dieser tut, schon fast daran verzweifeln, wie man CSS oder JS Code einbindet und das dann öffentlich ins Netz stellen halte ich für keine gute Idee. Wie du die Dateien benennst und wo du diese hinpackst bleibt dir überlassen.

Entweder, du verwendest wirklich etwas fertiges, das kostet von mir aus mal 10 Euro (die Zeit die du mittlerweile investiert hast dürfte ein Vielfaches kosten) oder du liest dir wirklich erstmal die Grundlagen an.

VG,
Mad

 

[gravitas]

Moinsen @Kai-Q ,

Du verschwendest effektiv Zeit, wenn du etwas "einbauen" möchtest, von dem du keine Ahnung hast. Es geht schneller, wenn du dich erstmal mit den Grundlagen auseinandersetzt. Nimm dir einen Tag (oder mindestens einen Halben), um einen Überblick zu bekommen und du wirst erste Erfolgserlebnisse haben. Zurücklehen und warten, bis dir durch das Forum quasi gebratene Tauben in den Mund fliegen lässt, bringt dir einfach nichts. Dafür sind die Fragen einfach zu chaotisch und offenbaren zu viele Lücken. Herumprobieren deinerseits und dann bei "Nichterfolg" hier nachfragen und auf Antworten warten, wird dich nicht voranbringen.

Hier sind ein paar Webseiten, die dich unterstützen:

https://www.w3schools.com/html/default.asp
https://wiki.selfhtml.org/
https://www.html-seminar.de/

Diese Seite zeigt dir auf schöne Weise, was eine gute Trennung zwischen CSS und HTML selbst ausmacht und bedeutet. Hier ist das "HTML" immer gleich, die CSS aber immer anders. Das CSS bietet hier also das "Design" und zeigt dir, was man mit einer guten CSS anstellen kann!

http://www.csszengarden.com/

So, nun viel Spaß! Wenn die Leute merken, dass du dich grundlegend mit der Materie auseinandersetzt und entsprechende Fragen stellst, bekommst du hier immer Hilfe!

----
Ach ja; der Thread wäre wahrscheinlich unter "Programmieren" --> "Fragen zu Softwareentwicklung und Webdesign" besser aufgehoben!

 

[PC-Gonzo]

Ich möchte es eigentlich nur so simpel haben wie ich als Bild dargestellt habe. Mehr möchte ich nicht.


Apropos, mir waren die alten Flashplayer lieber. Liesen sich etwas einfacher einbinden.

 

[gravitas]

Mehr nicht?
Na, denn man tau!

 

[PC-Gonzo]

Nein, mehr will ich auch nicht. Soll nichts "Professionelles" sein. Nicht so eine Schnick Schnack Seite.
Einfach nur ne simple Homepage mit dem Player und ein paar Verlinkungen. Fertig.