Musik einbinden in Html im Hintergrund

froststep

Hallo,

ich bin noch relativ neu in HTML,CSS und Javascript und versuche derzeit mit PhoneGap eine Android App zu erstellen, die auf HTML u.Co basiert, da mir Java und Android dann doch etwas zu kompliziert und zeitintensiv sind.

Ich habe das Internet schon durchforstet und viele verschiedene Möglichkeiten ausprobiert, jedoch hat keine so richtig geklappt.

Hier ein paar Beispiele:

Code

<embed name="Musiktitel" src="musikdateiname.mp3" border="2"  width="164" height="25" autostart="false" Delay="0" VOLUME="35"  loop="true" controls="smallconsole">

Das ist für HTML5, wenn ich richtig gelesen habe:

Code

<audio controls="controls">
  <source src="musik.ogg" type="audio/ogg" />
  <source src="musik.mp3" type="audio/mpeg" />
</audio>

Code

1. in den [I]head[/I] Bereich deiner Seite das hier einfügen: 
 [TABLE]
[TR]
[TD='class: number']1[/TD]
[TD='class: content']<bgsound src="background.mid" loop="infinite">[/TD]
[/TR]
[/TABLE]






    2. in den [I]body[/I] Bereich der Seite das hier einfügen: 
 [TABLE]
[TR]
[TD='class: number']1[/TD]
[TD='class: content']<embed src="background.mid" autostart="true" loop="true" hidden="true" height="0" width="0">[/TD]
[/TR]
[/TABLE]

Alles anzeigen

Ich hab alles ausprobiert, jedoch hat nichts davon geklappt. Mein Browser ist Firefox und ich editiere die Dateien mit "Brackets". Ich habe selbstverständlich die Platzhalter immer mit meiner Musikdatei ersetzt. Bei Beispiel 1 erscheint oben ein schwarzer Balken, aber da sind keine Knöpfe drauf und die Musik wird auch nicht automatisch abgespielt, wenn ich autostart auf true gesetzt habe.

So sieht mein HTML Code derzeit aus und dort möchte ich ein Audiofile einbinden:

HTML

<!DOCTYPE html>


<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/vorspiel.css" />
        <title>Lookout</title>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>


<div id="button">
    <input type="button" name="back" value="Back" onclick="window.location.replace('vorspiel.html')">
</div>

</body>
</html>

Alles anzeigen

MrMurphy

Hallo

Zitat

ich bin noch relativ neu

Dann habe ich gleich mal ein wichtigen Tipp für dich:

Zitat

die Musik wird auch nicht automatisch abgespielt

Das will außer dir auch niemand. Laß es bleiben. Töne, welcher Art auch immer, sollten nur abgespielt werden wenn die Besucher sie selbst starten.

Gruss

MrMurphy

froststep

Zitat von MrMurphy

Laß es bleiben. Töne, welcher Art auch immer, sollten nur abgespielt werden wenn die Besucher sie selbst starten.

Dem stimme ich natürlich auch vollstens zu, wenn es sich um eine normale website o.Ä. handeln würde. ich möchte jedoch ein textbasiertes adventure mithilfe von javascript erstellen und wiederrum mithilfe von PhoneGap das adventure auf android veröffentlichen. Ich orientiere mich an dem spiel "lifeline". Dort läuft im hintergrund eine atmosphärische musik, die man natürlich bei bedarf ausschalten kann durch die laut und leiser tasten am handy. ich möchte auch solch eine musik im hintergrund, die automatisch leise im hintergrund läuft, um etwas atmosphäre zu erzeugen.

Arne Drews

Hallo,

Wie siehts mit Google & Co aus?
Suchbegriffe, wie HTML5 Audio abspielen o.ä. sollten doch ausreichend Ergebnisse liefern?

Prinzipiell sollte sowas schon reichen:

HTML

<audio autoplay>
    <source src="deinemusik.mp3" type="audio/mp3">
    <source src="deinemusik.ogg" type="audio/ogg">
</audio>

Ich glaube der Opera will das .ogg Format haben und der IE9 hat da noch so seine Sorgen mit, aber ansonsten sollte das in allen modernen und aktuellen Browsern funktionieren.

Gruß Arne

froststep

wie du oben in dem ersten post siehst, habe ich den code bereits ausprobiert. er hat jedoch nicht funktioniert. ich werde mich heute nachmittag nochmal daran setzen und ggf. mal mehrere browser und dateien ausprobieren.

Edit: habe stumpf deinen code kopiert und siehe da, es geht...

entweder an meinem code von gestern war etwas falsch oder ich hätte einfach mal den pc neustarten müssen. vielen dank!

bei weiteren fragen werde ich mich wieder an euch wenden.

AnyKey

Na siehste.

Kann sonst den anderen Postern beipflichten.

In Browserspielen macht eine Hintergrundmusik mit den Attributen "autoplay" und "loop" durchaus Sinn, ist sonst natürlich für normale Internetseiten nicht zu empfehlen.

Möchtest Du Audiodateien einbinden, die durch den Benutzer manuell mit einer Control-Leiste zu starten sein soll, ist auch auf eine ausreichende Größe zu achten.
Ist der Platz für die Controls zu klein gewählt, werden die Control-Elemente wie Play-Taste, Spielzeitpegel, etc. möglicherweise nicht angezeigt.

Tags