Musik abspielen

davidos_no.1

Hallo..
ich möchte mir selber einen kleinen "Player" basteln. Das heißt, dass ich Grafiken (Start, Stop, etc.) habe, die dann beim klicken dementsprechend reagieren sollen. Ich gehe davon aus, dass das mit JavaScript möglich ist?! Hat jemand zufällig einen fertigen Code oder kann mir helfen?

MfG

synaptic

klar was willste abspielen und wird der player in nem popup sein?
wie haste dir des vorgestellt?
der windows-mediaplayer hat "nen eigenen html-code"..
http://home.arcor.de/synaptic/hilfe/mp3player.html

hab nur die mp3files gelöscht.. bis auf eine.
musste mal gucken ob du mit dem code was anfangen kannst!

kannst ihn ja kopieren und mit eigenen files testen!

davidos_no.1

Ich habe mit einem Grafikprogramm Buttons (Start, Stop) enworfen. Die will ich in ein DIV-Container einbinden. Dann soll die Musik starten, wenn man auf Start klickt und anhalten, wenn man auf Stop klickt.
Deswegen kein WMP und andere "vorgefertigte" Player.
Abspielen will ich eine ganz normale .mp3...

MfG

synaptic

dann check das mal hier: http://home.arcor.de/synaptic/hilfe/rollsnd.html

evtl bringt dich das der lösung von deinem problem näher...

ansonsten gib die links zu den bildern und beispielfiles. dann scripte ich des

davidos_no.1

Die Buttons und die .mp3 findest du hier: http://home.arcor.de/stylix/Player/
Danke!

synaptic

HTML

<script language="JavaScript">
<!--
var soundz = new Array();


function loadsounds(){
soundz[0] = new Object();
soundz[0].src = "http://home.arcor.de/stylix/Player/Daniel%20Cirera%20-%2002%20-%20Roadtrippin.mp3";
}


 
 function playsnd(soundid){
 target = document.getElementById("playerdiv");
 var soundtag;
 switch(soundid){
 case "0":
    soundtag= "<embed hidden='true' type='audio/x-wav' loop='false' src='" + soundz[0].src + "' id='player'/>";
 break;
     }
target.innerHTML=soundtag;

 }
 
 function stopsnd(){
 target = document.getElementById("playerdiv");
 target.innerHTML="";
 }
 // -->
 </script>
</head>
<body onload="loadsounds();">
<div id="playerdiv"></div>
<img src="http://home.arcor.de/stylix/Player/play.png" onclick="playsnd('0');" style="cursor:pointer;" />
<img src="http://home.arcor.de/stylix/Player/stop.png" onclick="stopsnd();" style="cursor:pointer;" />




</body>
</html>

Alles anzeigen

is dann so: http://home.arcor.de/synaptic/hilfe/player.html

davidos_no.1

Erstmal vielen Dank! leider funktioniert das bei mir irgendwie nicht...

Mein Head-Bereich...

Code

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>


<link rel="stylesheet" href="01.css" type="text/css">
<link rel="stylesheet" href="02.css" type="text/css">


<script language="JavaScript">
<!--
var soundz = new Array();


function loadsounds(){
soundz[0] = new Object();
soundz[0].src = "12 Underwater Love.mp3";
}


 
 function playsnd(soundid){
 target = document.getElementById("playerdiv");
 var soundtag;
 switch(soundid){
 case "0":
    soundtag= "<embed hidden='true' type='audio/x-wav' loop='false' src='" + soundz[0].src + "' id='player'/>";
 break;
     }
target.innerHTML=soundtag;

 }
 
 function stopsnd(){
 target = document.getElementById("playerdiv");
 target.innerHTML="";
 }
 // -->
 </script>

Alles anzeigen

Mein Bereich, mit den Images...

Code

<div class="box1">
<h3 class="boxheader">.Radio</h3>
<img src="images/play.png" onclick="playsnd('0');" style="cursor:pointer;" />
<img src="images/stop.png" onclick="stopsnd();" style="cursor:pointer;" />
<br>
</div>

MfG

jojo87

gib dem div noch die richtige id:

HTML

<div class="box1" id="playerdiv">

Gruß,
jojo

davidos_no.1

Zitat von jojo87
gib dem div noch die richtige id:
HTML
<div class="box1" id="playerdiv">
Gruß,
jojo

Habe ich jetzt gemacht - das Lied fängt immer noch nicht an. Stattdessen verschwindet der ganze DIV-Container.

MfG

jojo87

Hast du mal einen Link zu nem Beispiel?

davidos_no.1

Zitat von jojo87

Hast du mal einen Link zu nem Beispiel?

http://home.arcor.de/stylix/TEST/

synaptic

das playerdiv muss einzeln stehen und leer sein..
probiers mal so..

davidos_no.1

Zitat von synaptic

das playerdiv muss einzeln stehen und leer sein..
probiers mal so..

Du meinst das so?

Code

<div class="box1">
<h3 class="boxheader">.Radio</h3>
<div id="playerdiv"></div>
<img src="images/PlayPurple.png" onclick="playsnd('0');" style="cursor:pointer;"/>
<img src="images/StopPurple.png" onclick="stopsnd();" style="cursor:pointer;"/> Titel von Interpret <br>
</div>

Falls ja, das funktioniert auch nicht...

MfG

synaptic

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>




<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Unbenanntes Dokument</title>








<link rel="stylesheet" href="player-Dateien/format.css" type="text/css">
<link rel="stylesheet" href="player-Dateien/menue.css" type="text/css">


<script language="JavaScript">
<!--
var soundz = new Array();


function loadsounds(){
soundz[0] = new Object();
soundz[0].src = "http://home.arcor.de/stylix/TEST/12%20Underwater Love.mp3";
}


 
 function playsnd(soundid){
 target = document.getElementById("playerdiv");
 var soundtag;
 switch(soundid){
 case "0":
    soundtag= "<embed hidden='true' type='audio/x-wav' loop='false' src='" + soundz[0].src + "' id='player'/>";
 break;
     }
target.innerHTML=soundtag;

 }
 
 function stopsnd(){
 target = document.getElementById("playerdiv");
 target.innerHTML="";
 }
 // -->
 </script>


</head><body onload="loadsounds();">






<table id="top" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td id="top1">&nbsp;</td>
</tr>
<tr>
<td id="top2" align="right" valign="bottom">&nbsp;</td>
</tr>
<tr>
<td id="top3">&nbsp;</td>
</tr>
</tbody></table>






<!--ende oben-->


<table align="center" border="0" cellpadding="0" cellspacing="0" width="84%">
<tbody><tr>
<td id="sp1" valign="top">
<!-- weiterer Inhalt unter dem Menü evt.-->
<div class="box01">
<h3 class="boxheader">.News</h3>




TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT....</div>
<!--ende BOX 1-->


















<!-- ende inhalt--></td>
<td id="trenner" align="center"><img src="player-Dateien/pixelspace.gif" alt="" border="0" width="1" height="1"></td>
<td id="nav" valign="top">
<!-- ========rechte spalte============-->
<img src="player-Dateien/pixelspace.gif" alt="" border="0" width="260" height="1">
<!--BOX 1-->


<div class="box1" id="playerdiv">
</div>
<div>


<h3 class="boxheader">.Radio</h3>


<img src="player-Dateien/PlayPurple.png" onclick="playsnd('0');" style="cursor: pointer;">
<img src="player-Dateien/StopPurple.png" onclick="stopsnd();" style="cursor: pointer;">


<br>
</div>


<!--ende BOX 1-->










<!--BOX 2-->
<div class="box2">
<div id="menu2">
<h3 class="boxheader">.Navigation</h3>
<ul>
<li><a href="http://home.arcor.de/stylix/TEST/index.html">News</a></li>
<li><a href="http://home.arcor.de/stylix/TEST/index.html">Team</a></li>
<li><a href="http://home.arcor.de/stylix/TEST/index.html">Spotguide</a></li>
<li><a href="http://home.arcor.de/stylix/TEST/index.html">Wetter</a></li>
<li><a href="http://home.arcor.de/stylix/TEST/index.html">Tagebuch</a></li>
<li><a href="http://home.arcor.de/stylix/TEST/index.html">Kontakt</a></li>
<li><a href="http://home.arcor.de/stylix/TEST/index.html">Impressum</a></li>
</ul>
</div>
</div>
<!--ende BOX 2-->






<!-- BOX 3-->
<div class="box3">


<h3 class="boxheader">.Tagebuch</h3>
<b style="color: rgb(98, 98, 98);">.21/06/2007</b><br>
Vestibulum velit nunc, hendrerit ac, semper id, lobortis sit amet, velit. In a nunc.        <span id="menubox"><img src="player-Dateien/arrow.gif" alt="" border="0" width="8" height="9"><a href="#">&nbsp;Weiter</a></span>
<br>
<br>
<b style="color: rgb(98, 98, 98);">.13/12/2005</b><br>
Vivamus varius justo. Nunc pretium congue massa. In placerat.                                <span id="menubox"><img src="player-Dateien/arrow.gif" alt="" border="0" width="8" height="9"><a href="#">&nbsp;Weiter</a></span>
<br>
<br>
<b style="color: rgb(98, 98, 98);">.25/09/1988</b><br>
Nam eros sem, fermentum in, tincidunt sit amet, fringilla vitae, risus.                      <span id="menubox"><img src="player-Dateien/arrow.gif" alt="" border="0" width="8" height="9"><a href="#">&nbsp;Weiter</a></span>
<br>
<br>
</div>
<!--ende BOX 3-->


<!--BOX 4-->
<div class="box4">


<h3 class="boxheader">.Links</h3>
<img src="player-Dateien/partner3.gif" border="0" width="80" height="15">&nbsp;<a target="_blank" href="http://de.wikipedia.org/wiki/Hauptseite"><img src="player-Dateien/wikipedia.png" alt="Enzyklopädie" title="Enzyklopädie" border="0" width="80" height="15"></a>




<br>
<br>
</div>


<!--ende BOX 4-->








<!-- ========end rechte spalte ============--></td>
</tr>
</tbody></table>
</body></html>

Alles anzeigen

du hattest 1) noch immer des div nich einzeln (zumindest net hochgeladen)
und du hattest 2.) leerzeichen in der url bzw im namen der mp3-file
und 3.) vermute ich fehlt dir die berechtigung diese datei abzuspielen oder?

davidos_no.1

Wen nich die "Box 1" von dir übernehme, werden die Images nicht mehr geladen.

Ich habe jetzt folgenden Code für die "Box 1" - alles klappt, nur das Lied wird nicht abgespielt.

Code

<!--BOX 1-->


<div class="box1">


<h3 class="boxheader">.Radio</h3>
<div id="playerdiv"></div>
<img src="images/PlayPurple.png" onclick="playsnd('0');" style="cursor:pointer;"/>
<img src="images/StopPurple.png" onclick="stopsnd();" style="cursor:pointer;"/> Titel von Interpret <br>
</div>


<!--ende BOX 1-->

Alles anzeigen

Die Berechtigung habe ich!

MfG

synaptic

ich glaub du hast nen cache-problem oder benutzt weder firefox, noch ie...
ich hab auf deinen link oeben geklickt und es lief musik nach klicken auf den play-button.
im ff3 und auch im ie7

davidos_no.1

Ich benutze die aktuellste version von firefox...komisch! woran könnte das cache-problem denn liegen?

mfg

synaptic

na du hast halt immer irgendwas im chache-speicher.. und nen problem als solches is es ja auch nich.. halte einfach mal die linke shift-taste gedrückt und klicke auf das reload-symbol vom browser.. dann sollte des fruchten.. und in dienen interneteinstellungen kannste dann auch festlegen ob du bei jedem besuch der seite nach ner aktuellen version gucken magst....

davidos_no.1

Habe alles versucht, trotzdem höre ich imme rnoch nichts - echt komisch!
Die Fehlerkonsule von FF gibt mir folgendes aus...

Zitat

Fehler: key is null
Quelldatei: file:///C:/Programme/Mozilla%20Firefox/components/nsUrlClassifierLib.js
Zeile: 1173

Zitat

Fehler: soundz[0] is undefined
Quelldatei: http://home.arcor.de/stylix/TEST/
Zeile: 28

Zitat

Fehler: key is null
Quelldatei: file:///C:/Programme/Mozilla%20Firefox/components/nsUrlClassifierLib.js
Zeile: 1173

Vielleicht hilft dir das etwas?!

MfG

synaptic

also bei der aktuellen version http://home.arcor.de/stylix/TEST/ funktioniert bei mir alles!
man drückt auf den button und dann startet der download und das lied ebenfalls..
hab den ff3.0.1

Musik abspielen

Tags

Benutzer online in diesem Thema