[FRAGE] Audio läuft in Chrome nicht

[Slothssassin]

Hallo,
bin ganz neu hier, also bitte seid nicht böse wenn ich irgendwas falsch mache.
Ich muss dieses Semester fürs Studium eine Multimedia-Website erstellen. Der Prof will auch, dass auf der Seite Musik im Hintergrund läuft...
Obwohl bis jetzt eigentlich alles ganz ok geklappt hat, kam hier ein Problem auf.
Die Musik läuft einfach in Google Chrome nicht. In Firefox und IE läuft alles wunderbar, nur Chrome will nicht so richtig.
Ich glaube das hängt mit dem eingebundenen Format zusammen. Habe ogg, mp3, aac und wav eingebunden.
Könnt ihr mir helfen?
Falls ihr den Code braucht, sagt Bescheid. Und vielen Dank schonmal!

 

[Sempervivum]

Ja, den Code werden wir wohl brauchen, wenn wir den Fehler finden sollen. Am besten auch die URL der Seite.
AFAIK genügt MP3.

 

[Slothssassin]

Die Seite ist noch nicht online, liegt bis jetzt nur im eclipse-workspace.

Hier der Code im HTML:

<section id="zusatz-container" class="hidden">
	        
			 <audio id="loop-1" preload="auto"> 
	            <source src="audio/music/music1.m4a" type="audio/aac">							<!--  Laeuft nicht in Chrome -->
	            <source src="audio/music/music1.wav" type="audio/wav">
	            <source src="audio/music/music1.ogg" type="audio/ogg">
	            <source src="audio/music/music1.mp3" type="audio/mpeg">
	        </audio>
	        <audio id="loop-2" preload="auto">
	            <source src="audio/music/music2.m4a" type="audio/aac">
	            <source src="audio/music/music2.wav" type="audio/wav">
	            <source src="audio/music/music2.ogg" type="audio/ogg">
	            <source src="audio/music/music2.mp3" type="audio/mpeg">
	        </audio>
	        <audio id="loop-3" preload="auto">
	            <source src="audio/music/music3.m4a" type="audio/aac">
	            <source src="audio/music/music3.wav" type="audio/wav">
	            <source src="audio/music/music3.ogg" type="audio/ogg">
	            <source src="audio/music/music3.mp3" type="audio/mpeg">
	        </audio>
	        <audio id="loop-4" preload="auto">
	            <source src="audio/music/music4.m4a" type="audio/aac">
	            <source src="audio/music/music4.wav" type="audio/wav">
	            <source src="audio/music/music4.ogg" type="audio/ogg">
	            <source src="audio/music/music4.mp3" type="audio/mpeg">
	        </audio>		
	</section>	

Und in JS:
/*
 * AUDIO-VARIABLEN
 */
var musikIstAn = false;
var aktuellerTrack = 0;
var tracksGesamt = 4; // ANPASSEN!!!
var $tracks = [];


	/* AUDIO-LISTENER */
	$("#musik").click(function(event){event.preventDefault(); if (musikIstAn) {pauseTrack(true);} else {naechsterTrack(false); } });
	$("#loop-1").one("canplaythrough", function(){
													$tracks[$tracks.length] = $("#loop-1");
													if (alleTracksGeladen()) naechsterTrack(false);
												});
	$("#loop-2").one("canplaythrough", function(){ $tracks[$tracks.length] = $("#loop-2"); if (alleTracksGeladen()) naechsterTrack(false);});
	$("#loop-3").one("canplaythrough", function(){ $tracks[$tracks.length] = $("#loop-3"); if (alleTracksGeladen()) naechsterTrack(false);});
	$("#loop-4").one("canplaythrough", function(){ $tracks[$tracks.length] = $("#loop-4"); if (alleTracksGeladen()) naechsterTrack(false);});

/* AUDIO-METHODEN */

/* Methode zum prüfen, ob alle Tracks geladen sind */
function alleTracksGeladen(){
	if (tracksGesamt > $tracks.length) {
		return false;
	} else {
		return true;
	}
}

/* Methode zum Abspielen eines zufälligen Tracks
 * Parameter:
 * * bleib: (optional) Wenn "true" wird der aktuelle Track weitergespielt
 * */
function naechsterTrack(bleib){
	if (!bleib) {
		$tracks[aktuellerTrack].get(0).pause();
		$tracks[aktuellerTrack].currentTime = 0;
		aktuellerTrack = Math.floor(Math.random() * $tracks.length);
	}
	$tracks[aktuellerTrack].get(0).play();
	console.log("Spiele Track " + aktuellerTrack + " von Position " + $tracks[aktuellerTrack].get(0).currentTime);
	$tracks[aktuellerTrack].one("ended", function() {naechsterTrack();});
	musikIstAn = true;
}

/* Methode zum Stoppen des aktuellen Tracks
 * Parameter:
 * * zurueckspulen: (optional) Wenn "true" wird der Track zurückgespult
 * */
function pauseTrack(zurueckspulen){
	$tracks[aktuellerTrack].get(0).pause();
	$tracks[aktuellerTrack].off("ended", function() {naechsterTrack();});
	musikIstAn = false;
	if (zurueckspulen) $tracks[aktuellerTrack].get(0).currentTime = 0;
}

 

[xorg1990]

Hi,
Hast du schon mal in der Console nachgesehenen ob da was steht?
In Chrome F12.

Rein Optisch kann ich jetzt nix entdecken, kann auch an den jquery zusammen hängen.

Ps: Das if else sieht gruslig aus:

function alleTracksGeladen(){
	if (tracksGesamt > $tracks.length) {
		return false;
	} else {
		return true;
	}
}

use this:

function alleTracksGeladen(){
	if (tracksGesamt === $tracks.length) {
		return true;
	} else {
		return false;
	}
}

 

[Slothssassin]

Ok Danke schonmal!
Ja hab schon in der Console nachgeschaut, da wird nix gemeldet.
Mittlerweile hab ich an der Seite schon weitergearbeitet und die Musik funktioniert willkürlich. Mal gehts, mal nicht. Ich kanns mir nicht erklären

 

[xorg1990]

Mittlerweile hab ich an der Seite schon weitergearbeitet und die Musik funktioniert willkürlich. Mal gehts, mal nicht. Ich kanns mir nicht erklären

Hm, das ist komisch.

Ich würde mal das Dollarzeichen bei var $tracks = [];
herausnehmen eventuell beißt sich das mit jquery... was ich mir zwar nicht vorstellen kann.
Als nächstes würde ich noch die den Index nicht über die Array länge bestimmen $tracks[$tracks.length]
sondern $tracks[0], $tracks[1] , usw.

Ansonsten könnte man noch abstecken, also in jede Funktion, if,else, usw ein console.log einbauen und schauen ob alles richtig getriggert wird, manchmal hat man ein <> verwechselt.

Oder man machst das ganz andres, Du nimmst statt den Audio tags den Audio Konstruktor.
var audio = new Audio("/pfad7zur/datei");

Formatbestimmung geht so:

var myAudio = new Audio(""), ogg = '', mp3 = '', wav = '';
ogg = myAudio.canPlayType("audio/ogg");
mp3 = myAudio.canPlayType("audio/mpeg");
var canPlayOgg = ((ogg != "no") && (ogg != ""));
var canPlayMp3 = ((mp3 != "no") && (mp3 != ""));
var canPlayWav = ((wav != "no") && (wav != ""));

console.log(canPlayOgg . ' : ' . canPlayMp3 . ' : ' . canPlayWav);

Viel spass noch beim weiter Programmieren