ComputerBase Menü
Aktuelles

Suche einen HTML 5 Free Musik Player

P

PC-Gonzo

Lt. Junior Grade
Registriert
Nov. 2006
Beiträge
370
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.
 
Ja, die liegen auf meinem Webspace.
 
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
 
  • Gefällt mir
Reaktionen: Fombu, razzy und grill
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.
 
Zuletzt bearbeitet:
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
 
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.
 
Zuletzt bearbeitet:
Nee, ich bekomme es irgendwie nicht so hin, so wie es auf dem Bild aussieht.
Audio Player.jpg

Bei mir ist dieses Malheur zu sehen.
Meine Resultat.jpg

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.

HTML: 
<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>
 
Zuletzt bearbeitet:
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:

1615562063290.png


oder mit

[CODE=html]blablabla[/CODE]

im Reintexteditor.
 
DeusoftheWired schrieb:
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.
Zum Vergrößern anklicken....
ok, habe ich geändert.
 
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.
 
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.
 
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
 
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.
 
Zuletzt bearbeitet:
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
 
  • Gefällt mir
Reaktionen: breedmaster und Fombu
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!
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: DeusoftheWired
Ich möchte es eigentlich nur so simpel haben wie ich als Bild dargestellt habe. Mehr möchte ich nicht.
Exampel.jpg

Apropos, mir waren die alten Flashplayer lieber. Liesen sich etwas einfacher einbinden.
 
Zuletzt bearbeitet:
Mehr nicht?
Na, denn man tau!
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Almalexia
Suche einen neuen Gaming-Monitor.
Antworten
7
Aufrufe
789
Almalexia
Almalexia
4
Suche einen Guten Monitor zum Zocken
2 3
Antworten
40
Aufrufe
2.317
4kZ
4
Quindan
Online-Audioplayer (Playlist) zum Einbinden auf Webseite gesucht
Antworten
8
Aufrufe
2.522
Reepo
Reepo
T
  • Gesperrt
Suche dringend einen neuen Computer
Antworten
1
Aufrufe
723
BFF
BFF
wrglsgrft
Suche Otto-PC, frage für einen Freund
2 3
Antworten
45
Aufrufe
5.353
Mork-von-Ork
Mork-von-Ork
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 165 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz