Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise-mp3 Datei abspielen
#1
Moin.
Last bitte mal den Sinn und Zweck meines Anliegens dahin gestellt.
Ich möchte gerne, dass auf meiner (Jux) Homepage bei klick auf abspielen eine mp3 Datei abgespielt wird. Ich weiß, dazu braucht man Lautsprecher. Oder gar ein Programm. PC oder Smartphone.
Egal wie. Was muss ich machen? Einfach verlinken klappt nicht. Probiert.
Ich denke ganz so einfach ist es dann doch nicht. Oder?
Gruß
Thomas

Mobirise 4.10.5 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
... das geht mit automatischen Start nur am PC (nicht am Handy).

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

Dafür benötigst Du ein HTML5-Audio-Tag mit dem Attribut "autoplay". Beispiel:

Code:
<audio id="myAudio" autoplay loop>
 <source src="./mp3/Audio.mp3" type="audio/mpeg">
 <source src="./mp3/Audio.ogg" type="audio/ogg">
 Dieser HTML5 Player wird von Deinem Browser nicht unterstützt.
</audio>


... für das Handy, bzw. einen Player, würdest Du auf jeden Fall einen bedienbaren Player benötigen (ein/aus). Dazu trägst Du dann das Attribut "controls" ein.

Code:
<audio id="myPlayer" controls loop>
 <source src="./mp3/Audio.mp3" type="audio/mpeg">
 <source src="./mp3/Audio.ogg" type="audio/ogg">
 Dieser HTML5 Player wird von Deinem Browser nicht unterstützt.
</audio>


Verschieden Browser benötigen eventuell das .ogg Audio-Fomat, daher sollte man neben dem .mp3 Audio-Format auch das .ogg Audio-Format eintragen und entsprechend seine MP3-Datei zusätzlich in eine OGG-Datei konvertieren und auf den Server laden.

https://audio.online-convert.com/convert-to-ogg
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Erstmal Danke Tommy.

Habe ich auch soweit verstanden.
Nur erscheint bei mir der Player zwar in der Arbeitsansicht, aber nicht nach dem publizieren.
Ich habe einen einfachen Textblock genommen. Wahrscheinlich auch schon falsch.
Die Seite ist noch nicht Online.

Code:
<audio controls>
 <source src="horse.ogg" type="audio/ogg">
 <source src="www.tsad17.de/music/U96Das%20Boot.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<section class="mbr-section article content1">
   
   <mbr-parameters>
   <!-- Block parameters controls (Blue "Gear" panel) -->
       <input type="range" inline title="Oben" name="paddingTop" min="0" max="8" step="1" value="4">
       <input type="range" inline title="Unten" name="paddingBottom" min="0" max="8" step="1" value="4">
       <input type="range" inline title="Width Content" name="widthContent" min="1" max="4" step="1" value="2">
       <input type="color" title="Hintergrundfarbe" name="bgColor" value="#ffffff">
   <!-- End block parameters -->
   </mbr-parameters>

   <div class="container">
       <div class="media-container-row">
           <div class="mbr-text col-12 mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-text" data-multiline mbr-article mbr-class="{'col-md-6': widthContent == 1, 'col-md-8': widthContent == 2, 'col-md-10': widthContent == 3, 'col-md-12': widthContent == 4}"><p><b>Das Boot von U96</b></p></div>
       </div>
   </div>
</section>

Ihr müsst Euch dass so vorstellen.
Es soll keine Musik erschallen wenn die Seite geöffnet wird.
Ich habe eine absolut nicht ernst zu nehmende mp3 Hitparade eingefügt.
Und da soll man jedes Lied einzeln anklicken können, damit es dann abspielt.
Gruß
Thomas

Mobirise 4.10.5 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Habe was gefunden und probiert.

Code:
<p><b>Song 1:</b>
<audio src="/audios/MHO-0003.mp3" controls ></audio>
</p>
<p><b>Song 2:</b>
<audio controls src="/audios/schoene_isabella_aus_kastilien.mp3" ></audio>
</p>
<p><b>Song 3:</b>
<audio controls src="/audios/probe.mp3"  ></audio>
</p>

Funktioniert.
Jetzt kommt es nur noch auf die Ausrichtung oder Design an.

Ach ja. Und den Code Editor genommen.  Rolleyes
Gruß
Thomas

Mobirise 4.10.5 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Moin.
Und schon wären wir beim Design.
Wie bekomme ich das denn hin, dass alles schön untereinander steht.
Man stelle sich zwei Spalten vor. Die Liedernamen rechtsbündig. Und daneben der Controller linksbündig.
Und der Hintergrund der Lieder sollte nach Möglichkeit durchgehend sein.
Ich hoffe Ihr wisst was ich meine.

Code:
<p><strong>Das Boot</strong> von U96
<audio src="https://www.tsad17.de/music/U96Das%20Boot.mp3" controls=""></audio>
</p>
<p><strong>Wenn ein Schiff vorüber fährt</strong> von Julio Iglesias
<audio controls="" src="/audios/probe.mp3"></audio>
</p>
<p><strong>Alles im Griff auf dem sinkenden Schiff</strong> von Udo Jürgens
<audio controls="" src="/audios/probe.mp3"></audio>
</p>
<p><strong>Ein Schiff wird kommen</strong> von Andrea Berg
<audio controls="" src="/audios/probe.mp3"></audio>
</p>
<p><strong>I see a Boat on the river</strong> von Boney M.
<audio controls="" src="/audios/probe.mp3"></audio>
</p>

Code:
p{
text-align: center;  
color: #0000ff;
background: rgba(255, 255, 255, 0.8);
padding: 0,
}

Ist leider immer noch nicht Online.
Gruß
Thomas

Mobirise 4.10.5 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
.... gucke Dir mal den Player vom Werner an. Der kann ziemlich alles ...

http://www.nof-tutorials.com/Audio-Datei...index.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Moin.
Der ist ja schon mal klasse.
Eigentlich genau dass was ich gerne wollte.
Ich schraube gerade so ein bisschen daran rum.
Frage: Was muss ich löschen damit diese Fortschrittsanzeige weg ist?


.jpg  fortschrittsanzeige.JPG (Größe: 30,6 KB / Downloads: 7)
Gruß
Thomas

Mobirise 4.10.5 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Moin,

Du könntest dieses div mit der id="progress" einfach löschen, bzw. (besser) mit diesen Zeichen

<!-- deaktivieren -->

also dann so:

Code:
<!--<div id="progress"></div>-->

... falls Du es später doch wieder verwenden möchtest.

Code:
            <tr>
             <td id="progressbar">
              <!--<div id="progress"></div>-->
             </td>
            </tr>


Thomas, mal was anderes, Dir ist schon bewusst, dass Du keinerlei Musik im Internet präsentieren darfst, die nicht ausdrücklich gemafrei produziert wurde. Alles andere ist rechtlich auch geschützt und darf nicht öffentlich angeboten werden. Das kann hohe Strafen nach sich ziehen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Danke.  thumbs up
Ja. Weiß ich.
Ich schraube auch nur ein bisschen da. Ich versuche mal etwas dort. Und teste mal das.
Wird halt 'ne Juxseite.
Am Ende kommt wahrscheinlich alles wieder in die Tonne bevor ich es überhaupt publiziere und ich fange von vorne an.
Wobei ich eigentlich noch gar nicht richtig angefangen habe.
:D
Gruß
Thomas

Mobirise 4.10.5 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Thomas,

du kannst doch alles ganz leicht umgehen, bzw. absichern:
Schütze bei 1und1 einfach dein Verzeichnis. Dann kannste abspielen was du willst.
Wer das dann anguggen, hören will, muss den Zugang kennen. So bist immer auf der sicheren Seite und kannst ruhig schlafen...du weißt ja, es gibt immer mehr Leute,- die nix besseres zu tun haben, als anderen Leuten ans Bein zu pinkeln. Diese Unsitte verbreitet sich im Facebook-Zeitalter ja ganz rasant! :D
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Gar keine schlechte Idee....
Die Seite wird ohnehin zu großen Teilen nur von den 7 Teilnehmern der Bootstour zu öffnen sein.
Gruß
Thomas

Mobirise 4.10.5 + Code Editor
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise-Kann man die Timeline Linie ändern Thomas Saake 10 175 19.07.2019, 18:01
Letzter Beitrag: Tommy Herrmann
  Mobirise-Dünner Rahmen um Text Thomas Saake 2 53 18.07.2019, 17:39
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Builder Thomas Saake 2 87 18.07.2019, 09:31
Letzter Beitrag: Thomas Saake
  Mobirise-Fehlermeldung app.asar Thomas Saake 3 84 16.07.2019, 16:21
Letzter Beitrag: Thomas Saake
  in mobirise eingrückte Auflistung im Text geht das funsport 2 98 16.07.2019, 11:12
Letzter Beitrag: Martin73
  Mobirise-Zeilenabstand Thomas Saake 9 115 16.07.2019, 10:55
Letzter Beitrag: Martin73
  Mobirise-Timeline mit Bildern gesucht Thomas Saake 5 127 16.07.2019, 10:15
Letzter Beitrag: Thomas Saake
  Mobirise-Suchfunktion im Forum Thomas Saake 4 115 09.07.2019, 16:14
Letzter Beitrag: Thomas Saake
  Mobirise-Menüleiste gesucht Thomas Saake 3 106 08.07.2019, 17:38
Letzter Beitrag: Thomas Saake
  Mobirise-Backstretch Full Screen Hintergrund Thomas Saake 5 169 01.07.2019, 15:43
Letzter Beitrag: Thomas Saake



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!