JavaScript HTML5 Player

Fou-Lu · 19. Februar 2013

Hallo an alle CBler,
ich quäl mich schon seit 2 Tagen mit einer ziemlich verwirrenden Sache...

Ich habe eine Seite mit ca. 50 Liedern drauf.
Um die Lieder die ich alle einzeln in die Seite einbinde wiedergeben zu können, verwende ich audio.js

Gestern hab ich nur die Hälfte der Lieder eingepflegt gehabt und es hat ja eigentlich auch alles funktioniert...
Der Player lief im Firefox, IE8, Opera und auf dem IPhone im Safari.

Nun nachdem ich alle 50 eingepflegt habe, funktioniert es NUR im Firefox. Der FF ladet die Seite ohne
Probleme, ladet den Player und kann das ganze dann auch abspielen.
Im Opera dagegen, er ladet zwar die Seite, aber zeigt den Player nicht an.

Aber was am aller "witzigsten" ist, ist dass der IE8 sich schon beim Laden der Seite aufhängt... erst nach ca.
10 bis 15 Minuten ist er dann wieder erreichbar und zeigt mir den Player an und kann teilweise (wenn auch
sehr sehr langsam) die Lieder wiedergeben...

Die Lieder an sich binde ich, genau wie auf der Seite beschrieben, ein.

Im <HEAD>-Bereich:

PHP:

<link rel="stylesheet" type="text/css" href="audio.css" media="all" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="audiojs/audio.min.js"></script>
<script type="text/javascript">
	var a = audiojs;
				
	a.events.ready(function() {
		var a1 = a.createAll();
	});
</script>

Im <BODY>-Bereich dann die Lieder:

PHP:

<ol class="playlist">
	<li>
		<div class="nr">01.</div>
		<audio src="mp3/01_Track.mp3" preload="none"></audio>
		<div class="title">Lied 1</div>
	</li>
	<li>
		<div class="nr">01.</div>
		<audio src="mp3/02_Track.mp3" preload="none"></audio>
		<div class="title">Lied 2</div>
	</li>
	// ...
</ol>

Insgesamt hab ich 3 solcher OL-Listen mit je 18 LI-Punkten (Lieder) im Durchschnitt.

Ich hoffe ihr könnt mir dabei helfen das Problem zu lösen, wieso der Player auf einmal so rumspinnt.

Wie gesagt gestern Liefs noch in jedem Browser Problemlos und heute gehts nur noch im FF.
Opera ladet, aber zeigt den Player nicht an (wobei der <audio>-Tag im Quelltext durchaus angezeigt wird) und
der IE8 hängt sich auf. Erst nach 10-15 min voller CPU Auslastung springt er wieder an, aber dann spielt er die
Lieder nur einzeln mit auch nur mit Hängern ab...

Madman1209 · 19. Februar 2013

Hi,

ein Link auf die Seite wäre - falls verfügbar - nicht schlecht. Dann könnte man da auch eine Aussage dazu treffen.

Tipp an dich: Schau in die Konsolen / Entwicklerwerkzeuge, da sollte wenn es tatsächlich knallt ja was drinstehen.

Ausserdem: "lädt", nicht "ladet"

VG,
Mad

Fou-Lu · 19. Februar 2013

Danke für den Hinweis

Bin wahrscheinlich nur schon so genervt von diesem "Phänomen", dass ich selber nichts mehr peil

xD

Seite hab ich nur Lokal...

Firebug gibt mir keine Scriptfehler aus in der Konsole, genau wie der IE keine Scriptfehler oder ähnliches meldet. :-/

Madman1209 · 19. Februar 2013

Hi,

dann kannst du leider nur selbst Fehlersuche betreiben. Prüfe einfach, ab wie vielen Liedern der IE und die anderen schlapp machen.

Und btw: Wenn HTML 5 dann bitte nur aktuelle Browser verwenden! also nicht den IE8 sondern die neueste Version! Genauso wie mir Chrome in deiner Liste fehlt. Dafür lieber Opera vernachlässigen, das ist mittlerweile nur noch ein Randgruppenbrowser.

VG,
Mad

Fou-Lu · 19. Februar 2013

Naja diese audio.js Bibliothek hat ja nen Fallback (so nennt man das glaub ich), dass wenn HTML5 nicht verfügbar,
dann der Flashplayer geladen wird...

Deswegen verwundert mich das ganze um so mehr warum die anderen Browser so spinnen. x(

DeusoftheWired · 19. Februar 2013

Probier’s mal mit dem Playlist-Beispiel der github-Seite von audio.js und passe den Code entsprechend deinen Liedern an.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>audio.js</title>
    <meta content="width=device-width, initial-scale=0.6" name="viewport">
    <style>
      body { color: #666; font-family: sans-serif; line-height: 1.4; }
      h1 { color: #444; font-size: 1.2em; padding: 14px 2px 12px; margin: 0px; }
      h1 em { font-style: normal; color: #999; }
      a { color: #888; text-decoration: none; }
      #wrapper { width: 400px; margin: 40px auto; }
      
      ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
      ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
      ol li a { display: block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
      li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
      li.playing a { color: #000; }
      li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }
      
      #shortcuts { position: fixed; bottom: 0px; width: 100%; color: #666; font-size: 0.9em; margin: 60px 0px 0px; padding: 20px 20px 15px; background: #f3f3f3; background: rgba(240, 240, 240, 0.7); }
      #shortcuts div { width: 460px; margin: 0px auto; }
      #shortcuts h1 { margin: 0px 0px 6px; }
      #shortcuts p { margin: 0px 0px 18px; }
      #shortcuts em { font-style: normal; background: #d3d3d3; padding: 3px 9px; position: relative; left: -3px;
        -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px;
        -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

      @media screen and (max-device-width: 480px) {
        #wrapper { position: relative; left: -3%; }
        #shortcuts { display: none; }
      }
    </style>
    <script src="./jquery.js"></script>
    <script src="../audiojs/audio.js"></script>
    <script>
      $(function() { 
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('ol li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });
        
        // Load in the first track
        var audio = a[0];
            first = $('ol a').attr('data-src');
        $('ol li').first().addClass('playing');
        audio.load(first);

        // Load in a track on click
        $('ol li').click(function(e) {
          e.preventDefault();
          $(this).addClass('playing').siblings().removeClass('playing');
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });
        // Keyboard shortcuts
        $(document).keydown(function(e) {
          var unicode = e.charCode ? e.charCode : e.keyCode;
             // right arrow
          if (unicode == 39) {
            var next = $('li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.click();
            // back arrow
          } else if (unicode == 37) {
            var prev = $('li.playing').prev();
            if (!prev.length) prev = $('ol li').last();
            prev.click();
            // spacebar
          } else if (unicode == 32) {
            audio.playPause();
          }
        })
      });
    </script>
  </head>
  <body>
    <div id="wrapper">
      <h1>wait what — notorious xx <em>(2009)</em></h1>
      <audio preload></audio>
      <ol>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/02-juicy-r.mp3">juicy-r</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3">islands is the limit</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3">one more chance for a heart to skip a beat</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/06-suicidal-fantasy.mp3">suicidal fantasy</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/07-everyday-shelter.mp3">everyday shelter</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/08-basic-hypnosis.mp3">basic hypnosis</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/09-infinite-victory.mp3">infinite victory</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li>
        <li><a href="#" data-src="http://s3.amazonaws.com/audiojs/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li>
      </ol>
    </div>
    <div id="shortcuts">
      <div>
        <h1>Keyboard shortcuts:</h1>
        <p><em>&rarr;</em> Next track</p>
        <p><em>&larr;</em> Previous track</p>
        <p><em>Space</em> Play/pause</p>
      </div>
    </div>
  </body>
</html>

Fou-Lu · 19. Februar 2013

Danke für den Ratschlag. Werd ich gleich mal ausprobieren.

Berichte dann obs geklappt hat oder nicht

Suche

JavaScript HTML5 Player

Fou-Lu

Lt. Junior Grade

Madman1209

Fleet Admiral

Fou-Lu

Lt. Junior Grade

Madman1209

Fleet Admiral

Fou-Lu

Lt. Junior Grade

DeusoftheWired

Fleet Admiral

Fou-Lu

Lt. Junior Grade

Ähnliche Themen