Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann

Die Foren sind geschlossen. Für Fragen zu MR, NOF & mehr steht Tommys Forum zur Verfügung. Ich danke für die langjährige Treue und Mitarbeit! Eure Administratorin.

Mobirise-MP3 Player einbinden. Soundcloud?
#1
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.  :D
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?
Alle Beiträge dieses Benutzers finden
#2
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.
Alle Beiträge dieses Benutzers finden
#3
Danke.
Ich weiß. Ich weiß.
Ist was spezielles....  Shy
Alle Beiträge dieses Benutzers finden
#4
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.
Alle Beiträge dieses Benutzers finden
#5
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/
Alle Beiträge dieses Benutzers finden
#6
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?
Alle Beiträge dieses Benutzers finden
#7
... soll das nicht im Internet laufen, weil Du einen lokalen Pfad angibst :eek:

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.
Alle Beiträge dieses Benutzers finden
#8
Ich hatte ja keine Webseite mehr... Crying
Man eben zack ne neue gemacht.
Und schon ist alles wie sein muss. Mit Foto.
Natürlich mit den Dateien auf dem Server.  :D
Alle Beiträge dieses Benutzers finden
#9
Moin.
Ich habe jetzt den Player von Werner eingebaut.
Soweit funktioniert auch alles.  thumbs up
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
Alle Beiträge dieses Benutzers finden
#10
... 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:


.jpg  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.
Alle Beiträge dieses Benutzers finden
#11
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>
Alle Beiträge dieses Benutzers finden
#12
Da muss ich was nicht mit kopiert haben. Huh
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.
Alle Beiträge dieses Benutzers finden


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Umstieg auf Mobirise 5 nof15us 67 3.946 16.12.2020, 10:53
Letzter Beitrag: Tommy Herrmann
  NOF 12 und Mobirise kombinieren Petergun 14 513 11.12.2020, 07:50
Letzter Beitrag: Petergun
  Google und YouTube-Content einbinden scheselong 12 410 10.12.2020, 18:03
Letzter Beitrag: scheselong
  360 Grad Bild einbinden kfz-fotograf 3 214 09.12.2020, 10:43
Letzter Beitrag: Tommy Herrmann
  Mobirise-Drop Down Menü verschiedene Farben Thomas Saake 8 314 08.12.2020, 14:42
Letzter Beitrag: Thomas Saake
  Mobirise-Text unter Logo Menüleiste Thomas Saake 14 531 03.12.2020, 17:22
Letzter Beitrag: Thomas Saake
  Mobirise-Noch ein Problem mit Hamburger Menü auf Handy Thomas Saake 23 723 30.11.2020, 16:54
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Modal Text statt Kreuz zum schließen Thomas Saake 3 231 26.11.2020, 15:43
Letzter Beitrag: Thomas Saake
  Mobirise-Timeline Abstand verringern Thomas Saake 2 160 26.11.2020, 14:10
Letzter Beitrag: Thomas Saake
  Position Icons - Mobirise 5.2.0. Markus78 9 422 16.11.2020, 19:03
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!