Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Mehre MP3 abspielen auf einer Webseite“

TommiH

Nicht mehr ganz neu hier

Hallo,
ich würde gerne auf einer Seite mehrere mp3 Dateien abspielen, ohne Flash zu nutzen.
Zum einem geht ja die Anweisung
<audio src="mp3/September 2013/1 xxxxx.mp3" controls > </audio> xxxxxx.mp3<br>
Allerdings wird immer der player angezeigt. Hier würde ich gerne nur ein icon haben.
Nun habe ich folgendes gefunden, was allerdings immer nur den ersten Eintrag abspielt und die anderen ignoriert.
Ich denke, da habe ich was falsche gemacht, aber auf der Seite, wo ich den Code gefunden habe, hilft mir nicht weiter. Hat da jemand einen Idee?

Vielen Dank

Grüße
Thomas

HTML:
<!doctype html>
<html lang="en">
<head>
.....
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
......
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
....
</head>
<body>
........
    <div id="desc">

      <h2 style="margin-top:38px;">Play/pause music with one button using jQuery</h2>
    
      <a id="mtoogle" style="cursor:pointer;"> <img src="http://ftutorials.com/wp-content/uploads/2013/08/speaker.png"></a>
      <audio id="playTune">
        <source src="aaaaaaa.mp3">
      </audio> 1Intro/aaaaaa.mp3 <br>

          <script type="text/javascript">
            $('#mtoogle').toggle(
            function () {
            document.getElementById('playTune').play();
            },
            function () {
            document.getElementById('playTune').pause();
            }
            );
            </script> 
    </div>
          <div id="desc">

      <h2 style="margin-top:38px;">Play/pause music with one button using jQuery</h2>
    
    <a id="mtoogle" style="cursor:pointer;"> <img src="http://ftutorials.com/wp-content/uploads/2013/08/speaker.png"></a>
      <audio id="playTune">
        <source src="mp3/September 2013/1 xxxxxx.mp3">
      </audio> xxxxxxx.mp3 <br>

          <script type="text/javascript">
            $('#mtoogle').toggle(
            function () {
            document.getElementById('playTune').play();
            },
            function () {
            document.getElementById('playTune').pause();
            }
            );
            </script> 
    </div>
.......
</body>
 

TommiH

Nicht mehr ganz neu hier

MMM und wie blende ich via CSS den Plage raus bzw welche IDs?
Bin noch neu im Geschäft und mach es nur zum Spass.
 

TommiH

Nicht mehr ganz neu hier

Da ist dann nur leider keine Wiedergabe für den Player bzw. mp3 :(
Was muss man für die IDs machen. Also für das Script oben.
 

Curanai

Aktives Mitglied

Hi Tommi, hi Cebito,

hier hast Du eine schöne Übersicht zum Thema "audio"-Tag. Dort siehst Du auch, dass "mp3 only" nicht überall läuft, was heute noch benutzt wird.

Dann hast Du im Browser das Problem, dass Du nicht "zeitgleich" abspielen kannst - das ist eine mächtige Glückssache und Spielprogrammierer recht nervig (bspw. Background und FX aufgrund Event; nur mal aus dem Nähkästchen ^^).

Dann erwähne ich noch, dass diese Schreibweise vielleicht von Dir nochmals überdacht wird: src="mp3/September 2013/1 xxxxxx.mp3" - wegen der Leerzeichen. Es gab mal eine Zeit, in der Leerzeichen in Dateinamen verflucht waren ... da ich mir das abgewöhnt habe im WWW und nicht erwähnt ist, in welchem OS das getestet wird, erwähne ich es ... ^^

Dann gibt es Browser, die kommen am ".load()" Deiner Datei nicht drumherum. Dies wird auch als Lösung angeboten, wenn die Datei bspw. nicht abspielt - oder nur "manchmal".

Dann lieber Schritt für Schritt? Da hab ich hier was für Dich ...

Viel Erfolg und beste Grüße.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben