From fd0e0d675e981396c436c7b65a27dabacaac357e Mon Sep 17 00:00:00 2001 From: ente Date: Sat, 4 Dec 2010 17:37:34 +0100 Subject: [PATCH] Basic HTML5 audio player plugin --- plugins/audioplayer/README | 9 ++++ plugins/audioplayer/audioplayer.js | 57 +++++++++++++++++++++++++ plugins/audioplayer/lib_audioplayer.php | 5 +++ plugins/audioplayer/plugin.xml | 15 +++++++ plugins/audioplayer/style.css | 21 +++++++++ 5 files changed, 107 insertions(+) create mode 100644 plugins/audioplayer/README create mode 100644 plugins/audioplayer/audioplayer.js create mode 100644 plugins/audioplayer/lib_audioplayer.php create mode 100644 plugins/audioplayer/plugin.xml create mode 100644 plugins/audioplayer/style.css diff --git a/plugins/audioplayer/README b/plugins/audioplayer/README new file mode 100644 index 0000000000..5de1324d56 --- /dev/null +++ b/plugins/audioplayer/README @@ -0,0 +1,9 @@ +This plugin implements a very basic HTML5 audio preview for ownCloud. + +Only formats supported by the browser can be played. +Sadly, those are very limited and not coherent among browsers, see http://html5doctor.com/native-audio-in-the-browser/ for more info. + +Ideas to change that (TODO): +- Flashplayer fallback +and/or +- on-the-fly transcoding diff --git a/plugins/audioplayer/audioplayer.js b/plugins/audioplayer/audioplayer.js new file mode 100644 index 0000000000..82fe2966a3 --- /dev/null +++ b/plugins/audioplayer/audioplayer.js @@ -0,0 +1,57 @@ +OC_AudioPlayer = new Object(); + +OC_AudioPlayer.playAudio = function(dir, file, type) { + var path = WEBROOT + '/files/open_file.php?dir='+encodeURIComponent(dir)+'&file='+encodeURIComponent(file); + + OC_AudioPlayer.audioFrame = document.createElement('div'); + OC_AudioPlayer.audioFrame.setAttribute('id', 'audioframe'); + OC_AudioPlayer.audioFrame.setAttribute('class', 'center'); + var div = document.createElement('div'); + var inner = document.createElement('div'); + var audio = document.createElement('audio'); + var source = document.createElement('source'); + + if (!(!!(audio.canPlayType) && (audio.canPlayType(type) != "no") && (audio.canPlayType(type) != ""))) { + // use a flash player fallback + // or implement some nice on-the-fly recoding here + alert("Native playing of '"+type+"' format is not supported by your browser."); + return; + } + audio.setAttribute('controls', 'true'); + audio.setAttribute('preload', 'auto'); + audio.setAttribute('autoplay', 'true'); + audio.setAttribute('autobuffer', 'true'); + source.setAttribute('src', path); + source.setAttribute('type', type); + + audio.appendChild(source); + inner.appendChild(audio); + div.appendChild(inner); + OC_AudioPlayer.audioFrame.appendChild(div); + + OC_AudioPlayer.audioFrame.addEvent('onclick', OC_AudioPlayer.hidePlayer); + inner.addEvent('onclick', function(e){e.stopPropagation();}); // don't close if clicked on player + + body = document.getElementsByTagName('body').item(0); + body.appendChild(OC_AudioPlayer.audioFrame); +} + +OC_AudioPlayer.hidePlayer = function(){ + var div = document.getElementById('audioframe'); + div.parentNode.removeChild(div); +} + + +if(!OC_FILES.fileActions.audio){ + OC_FILES.fileActions.audio = new Object(); +} +if(!OC_FILES.fileActions.applicationogg){ + OC_FILES.fileActions.applicationogg = new Object(); +} + +OC_FILES.fileActions.audio.play = function() { + OC_AudioPlayer.playAudio(this.dir, this.file, this.mime); +} + +OC_FILES.fileActions.audio['default'] = OC_FILES.fileActions.audio.play; +OC_FILES.fileActions.applicationogg['default'] = OC_FILES.fileActions.audio.play; diff --git a/plugins/audioplayer/lib_audioplayer.php b/plugins/audioplayer/lib_audioplayer.php new file mode 100644 index 0000000000..206f76bb56 --- /dev/null +++ b/plugins/audioplayer/lib_audioplayer.php @@ -0,0 +1,5 @@ + diff --git a/plugins/audioplayer/plugin.xml b/plugins/audioplayer/plugin.xml new file mode 100644 index 0000000000..ea440eab80 --- /dev/null +++ b/plugins/audioplayer/plugin.xml @@ -0,0 +1,15 @@ + + + + musicplayer + A simple HTML5 based audio player for ownCloud + 0.1 + AGPL + ente + 1.1 + + + lib_audioplayer.php + + + diff --git a/plugins/audioplayer/style.css b/plugins/audioplayer/style.css new file mode 100644 index 0000000000..689a04940e --- /dev/null +++ b/plugins/audioplayer/style.css @@ -0,0 +1,21 @@ +#audioframe{ + position:absolute; + top:0px; + left:0px; + height:100%; + width:100%; + background:rgb(20,20,20); + background:rgba(20,20,20,0.9); + text-align:center; + display:table; +} + +#audioframe>div{ + display:table-cell; + vertical-align:middle; +} + +#audioframe>div>div{ + display:inline-block; +} +