Mehre MP3 abspielen auf einer Webseite

TommiH · 19.03.2014

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>

cebito · 19.03.2014

TommiH schrieb:
Nun habe ich folgendes gefunden, was allerdings immer nur den ersten Eintrag abspielt und die anderen ignoriert.

Versuchs mal mit verschiedenen ID's

TommiH schrieb:
Allerdings wird immer der player angezeigt.

Wenn du den Player nicht sehen willst, musst du ihn per CSS ausblenden

TommiH · 19.03.2014

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.

cebito · 19.03.2014

Code:

audio{
   display:none;
}

TommiH · 19.03.2014

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 · 19.03.2014

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.