Mobirise-MP3 Player einbinden. Soundcloud?

[Thomas Saake]

Moin.
Vergesst mal alle eure Bedenken wegen Musik auf einer Webseite.
Das ist eine Reise-Spaß-Informationsseite für lediglich 4 Personen.
Also die Mitreisenden. 
Ich würde da gerne einen MP3 Player einbauen. Sichtbar. Mit Start, Stopp und was weiß ich.
Mit Soundcloud komme ich irgendwie nicht klar. Ist das Ding überhaupt geeignet?
Kann mir da mal bitte jemand auf die Sprünge helfen?

[Tommy Herrmann]

Moin,

das geht mit dem HTML5 Audio-Element ganz einfach:

http://www.mobirise-tutorials.com/MP3-Music.html

Code:

<audio id="myPlayer" controls loop>
  <source src="./music/MeinSound.mp3" type="audio/mpeg">
  <source src="./music/MeinSound.ogg" type="audio/ogg">
  sorry - your browser does not support the audio element
</audio>

Du denkst aber daran, das alle bekannte Musik geschützt ist und auch GEMA Gebühren nach sich zieht. Du darfst also lediglich GEMA freie Musik im Internet verwenden, ansonsten kannst Du große und teure Probleme bekommen.

[Thomas Saake]

Danke.
Ich weiß. Ich weiß.
Ist was spezielles.... 

[Werner123]

Vielleicht auch mal diesen Audioplayer anschauen und testen: https://werner-zenk.de/scripte/audiodatei_steuern.php

Vielen Dank Tommy, die Seite von Thomas Langen > musicfillingstation.de gibt es anscheinend nicht mehr. Habe den Link auf meiner Website aktualisiert.

[Tommy Herrmann]

Ja, er hat sich offensichtlich dieser US Plattform mit jeder Menge anderer Künstler angeschlossen.

Keine Ahnung ob da etwas unter seiner Regie läuft. Ich hatte mal vor Jahren zu ihm Kontakt. Offensichtlich entwickeln sie dort nun auch Musik, die die verkaufen, die aber dennoch wohl gemafrei ist. Die Musik ist ja ursprünglich und vorwiegend als Hintergrundmusik für eigene Videos gedacht.

Mir fehlt da die Info, Thomas selbst ist ja Deutscher und lebt auch in Deutschland. Seine Domain hat er aber schon vor Jahren aufgegeben.

Früher konnte man jeden seiner Titel einfach kostenlos downloaden mit der Bitte auf seine damalige Domain "MusicFillingStation.de" zu verlinken.

Er hat noch seine Facebook-Seite und auch seine persönliche Webseite:

https://www.thomaslangen.de/

[Thomas Saake]

Moin.

Danke Werner für den Player.
Habe alles (testweise) eingebaut und er funktioniert.
Nur die Sache mit dem Bild klappt nicht.
Ich habe mir leider die Seite wo der Player rein soll vollständig zerschossen. Mein Fehler.
Deswegen muss ich nochmal von vorne anfangen. Deshalb nur Code und kein Link.

Code:

// Audiodateien
  txt[0] = "I see a boat on the river"; // Beschriftung
  file[0] = "D:/Boot 2021 mit Konni und Axel/musik/boneym.mp3"; // Dateiname
  pic[0] = "D:/Boot 2021 mit Konni und Axel/assets/images/aussenbereich.jpg"; // Hintergrundbild (Optional)

Habe ich da was falsch gemacht?

[Tommy Herrmann]

... soll das nicht im Internet laufen, weil Du einen lokalen Pfad angibst

Die Dateien gehören in jeden Fall in Deinen Projekt-Pfad, also z.B. so (wenn im gleichen Verzeichnis):

PHP-Code:

file[0] = "./musik/boneym.mp3"; 
pic[0] = "./assets/images/aussenbereich.jpg"; 


... Pfadangaben und Dateinamen dürfen keine Leer- oder Sonderzeichen haben.

[Thomas Saake]

Ich hatte ja keine Webseite mehr...
Man eben zack ne neue gemacht.
Und schon ist alles wie sein muss. Mit Foto.
Natürlich mit den Dateien auf dem Server. 

[Thomas Saake]

Moin.
Ich habe jetzt den Player von Werner eingebaut.
Soweit funktioniert auch alles. 
Am PC ist auch alles gut. Nur auf meinem Handy ist der Player zu schmal und vor allem zu breit.
Auf der Demoseite von Werner sieht das wesentlich besser aus.

http://tsad17.de/Boot2021AKTP/

Bootaktp
1234567

[Tommy Herrmann]

... ich befürchte der Player vom Werner (das wird alles über JavaScript gesteuert) ist so für das Handy nicht wirklich geeignet. Da fehlt eine @media Anweisung für die kleine Display-Größe.

Das sieht so aus:


 Breite-Player.JPG (Größe: 55,2 KB / Downloads: 19)



Schreibe mal dem Werner auf der Seite von diesem Player in den Kommentar-Bereich. Vielleicht hilft er Dir ja.

[Tommy Herrmann]

wo ist denn die ganze CSS bei Dir? Da wird das doch geregelt!

Das hier gehört doch auch zu dem Player:

Code:

<style>
  table#musikBox {
   color: #FFFFFF;
   background-color: #000000;
   background-position: Center Center;
   padding: 10px;
   margin: Auto;
   white-space: Nowrap;
   border: Solid 1px #000000;
   border-spacing: 12px;
   table-layout: Auto;
   outline: Solid 1px #FFD700;
   outline-offset: 10px;
   box-shadow: 0px 0px 10px 15px #535353;
   cursor: Default;
   -webkit-user-select: None;
   user-select: None;
  }

  @keyframes moveBg {
   11% {
    background-position: center left;
   }
   22% {
    background-position: center center;
   }
   33% {
    background-position: top left;
   }
   44% {
    background-position: top center;
   }
   55% {
    background-position: top right;
   }
   66% {
    background-position: center right;
   }
   77% {
    background-position: bottom right;
   }
   88% {
    background-position: bottom center;
   }
   99% {
    background-position: bottom left;
   }
  }

  table#musikBox td {
   padding: 5px;
  }

  input#volume {
   width: 60%;
   vertical-align: Middle;
   border-radius: 0px;
  }

  input[type="button"].button {
   color: #FFFFFF;
   background: rgba(0, 0, 0, 0.4);
   box-shadow: inset 0px 5px 5px #FFFFFF;
   border: Solid 1px #FFFFFF;
   padding: 1px 4px 1px 4px;
   transition: all 0.5s;
  }

  input[type="checkbox"] {
   display: None;
  }

  input[type="button"].button:hover {
   color: #FFD700;
   border: Solid 1px #FFD700;
   box-shadow: inset 0px -5px 5px #FFFFFF;
  }

  input[type="checkbox"].checkbox:checked + label {
   color: #FFD700;
  }

  label {
   font-size: 1.3rem;
   font-weight: Bold;
   transition: color 0.5s;
  }

  label:hover {
   color:#FFD700;
  }

  select#playlist option:nth-child(even) {
   background-color: #000000;
   color: #FFD700;
  }

  select#playlist option:nth-child(odd) {
   background-color: #000000;
   color: #FFFFFF;
  }

  div#speed {
   text-align: Center;
  }

  div#progress {
   width: 0%;
   height: 15px;
   margin: 0;
   border-radius: 5px;
   font-family: Arial, Sans-Serif;
   font-size: 0.75rem;
   color: #FFFFFF;
   box-shadow: inset 0px 5px 20px 4px #FFD700;
   text-shadow: 1px 1px 0px #555555;
  }

  td#progressbar {
   border-radius: 4px;
   padding: 0px;
  }
</style>

[Thomas Saake]

Da muss ich was nicht mit kopiert haben.
CSS war eigentlich (für mich) drin. Habe es nochmal neu eingefügt.
Nun ist es aber da. Sieht dann auch wenig anders aus.
Allerdings bleibt die Breite. Ich Texte mal Werner an.
Danke.