Hallo zusammen
Ich habe auf vibraphonistin.ch einen Musikplayer implementiert, der MP3 abspielen soll.
Realisiert habe ich das wie folgt: Audio-Interface für moderne Browser, die MP3 nativ unterstützen. Ein Flash-MP3-Player (Namentlich flash-mp3-player.net/) als Fallback für ältere Browser und den Firefox, da der ja bekanntlich MP3 noch nicht unterstützt.
Hat ja auch alles mal super schön funktioniert. Und jetzt wo’s online gehen soll versagts (ausser im Chrome, da tuts noch 
).
Funktioniert hat es in: firefox, opera, ie9, chrome.
Nicht funktioniert hat es in ie8.
Nun sieht das so aus:
Funktioniert in: chrome.
Funktioniert nicht in: firefox, opera, ie9, ie8.
Ich habe ehrlich keine Ahnung wieso.
Nach langem hin und her habe ich herausgefunden, dass im Firefox nun die Methode .SetVariable nicht mehr unterstützt wird. (Komisch, denn auf flash-mp3-player.net/ funktioniert es ja noch). Im Internet Explorer 8 scheint das selbe Problem zu bestehen.
Nun, wieso es im ie9 und opera nicht mehr funktioniert: keine Ahnung. 
Nun zum Code:
Kurze Anmerkung: die Konstruktoren AudioInterface und FlashInterface stellen die selbe API zur Verfügung, so dass ich Browserunabhängig die Audioaktionen steuern kann (was aber offensichtlich nichts bringt, wenns eh nur in einem geht )
Des weiteren wird %{typ:pfad}% vom CMS in einen absoluten Pfad verwandelt.
Das Script (/mod/de/audio/script.js):
var MP3Instance, MP3Listener, MP3Playlist, MP3CSS, MP3VisualPlaylist;
function setUpMP3Player() {
// choose either <audio>- or flash-interface
var usedInterface = FlashInterface;
if(window.Audio) {
var at = new Audio();
if(at.canPlayType('audio/mp3'))
usedInterface = AudioInterface;
delete at;
}
// ...
// create Player
MP3Instance = new usedInterface(MP3Playlist.next().file);
// ...
}
// ...
function AudioInterface(path) {
var player = new Audio();
player.onended = MP3NextTrack;
player.onunload = MP3NextTrack;
var playing = false;
this.playFile = function(path) {
player.src = path;
if(MP3CSS)
MP3CSS.innerHTML = '#mp3Player .button.play div {background-image:url(%{module:audio/pause.png}%)}';
};
this.play = function() {
playing = true;
player.play();
};
this.stop = function() {
playing = false;
player.pause();
};
this.pause = function() {
playing = false;
player.pause();
};
this.seek = function(percent) {
player.currentTime = parseInt(player.duration * percent / 100);
};
this.setVolume = function(percent) {
player.volume = percent/100;
};
this.mainBtn = function() {
if(playing) {
this.pause();
MP3CSS.innerHTML = '#mp3Player .button.play div {background-image:url(%{module:audio/play.png}%)}';
} else {
this.play();
MP3CSS.innerHTML = '#mp3Player .button.play div {background-image:url(%{module:audio/pause.png}%)}';
}
}
this.playFile(path);
this.stop();
setInterval(function() {
document.querySelector('#mp3Player .bar .position').style.width = player.currentTime / player.duration * 100 + '%';
}, 500);
}
function FlashInterface(path) {
var playing;
var _this = this;
MP3Listener = {
onInit: function() {
MP3Instance.playFile(path, true);
},
onUpdate: function() {
if((this.isPlaying === 'true' && this.position == 'undefined') ||
(playing && this.isPlaying === 'false' && this.position == 0))
MP3NextTrack();
playing = (this.isPlaying === 'true');
document.querySelector('#mp3Player .bar .position').style.width = this.position / this.duration * 100 + '%';
document.querySelector('#mp3Player .bar .available').style.width = this.bytesPercent+'%';
}
};
player = '<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000" data="%{module:audio/player.swf}%" type="application/x-shockwave-flash" width="1" height="1">'
+'<param name="movie" value="%{module:audio/player.swf}%"></param>'
+'<param name="FlashVars" value="listener=MP3Listener&interval=500"></param>'
+'<param name="AllowScriptAccess" value="always"></param>'
+'</object>'
/* wie folgt habe ich es früher gehabt:
document.createElement('object');
player.data = '%{module:audio/player.swf}%';
player.type = 'application/x-shockwave-flash';
var param = document.createElement('param');
param.name = 'FlashVars';
param.value = 'listener=MP3Listener&interval=500';
player.appendChild(param);
param = document.createElement('param');
param.name = 'AllowScriptAccess';
param.value = 'always';
player.appendChild(param);*/
var holder = document.createElement('div');
holder.innerHTML = player;
document.body.appendChild(holder);
player = holder.firstChild;
this.playFile = function(path, pause) {
player.SetVariable('method:setUrl', path);
player.SetVariable('enabled', 'true');
if(pause)
this.pause();
else
if(!navigator.appVersion.match(/; MSIE 8\../))
MP3CSS.innerHTML = '#mp3Player .button.play div {background-image:url(%{module:audio/pause.png}%)}';
};
this.play = function() {
console.log('a');
player.SetVariable('method:play', '');
};
this.stop = function() {
player.SetVariable('method:stop', '');
};
this.pause = function() {
player.SetVariable('method:pause', '');
};
this.seek = function(percent) {
player.SetVariable('method:setPosition', MP3Listener.duration * percent / 100);
};
this.setVolume = function(percent) {
player.SetVariable('method:setVolume', percent);
};
this.mainBtn = function() {
if(playing) {
_this.pause();
if(!navigator.appVersion.match(/; MSIE 8\../))
MP3CSS.innerHTML = '#mp3Player .button.play div {background-image:url(%{module:audio/play.png}%)}';
} else {
_this.play();
if(!navigator.appVersion.match(/; MSIE 8\../))
MP3CSS.innerHTML = '#mp3Player .button.play div {background-image:url(%{module:audio/pause.png}%)}';
}
}
}Wäre schön, wenn jemand Zeit hat, sich das anzusehen - ich stosse langsam an meine Grenzen…
Grüsse
tdl
PS: ich suche momentan ein Webentwicklerforum. Ich weiss, ich hoste nicht bei bplaced, dieses Forum wurde mir von einem Freund empfohlen; es wäre schön, wenn ich hier bleiben dürfte
