Basic HTML5 audio player plugin

5 files changed, 107 insertions, 0 deletions

diff --git a/plugins/audioplayer/README b/plugins/audioplayer/README
new file mode 100644
index 00000000000..5de1324d56a
--- /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 00000000000..82fe2966a3b
--- /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 00000000000..206f76bb561
--- /dev/null
+++ b/plugins/audioplayer/lib_audioplayer.php
@@ -0,0 +1,5 @@
+<?php
+//load the required js and css files
+OC_UTIL::addScript('plugins/audioplayer/audioplayer.js');
+OC_UTIL::addStyle('plugins/audioplayer/style.css');
+?>
diff --git a/plugins/audioplayer/plugin.xml b/plugins/audioplayer/plugin.xml
new file mode 100644
index 00000000000..ea440eab800
--- /dev/null
+++ b/plugins/audioplayer/plugin.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0"?> 
+<plugin version='1.0'>
+	<info>
+		<id>musicplayer</id>
+		<name>A simple HTML5 based audio player for ownCloud</name>
+		<version>0.1</version>
+		<licence>AGPL</licence>
+		<author>ente</author>
+		<require>1.1</require>
+	</info>
+	<runtime>
+		<include>lib_audioplayer.php</include>
+	</runtime>
+</plugin> 
+
diff --git a/plugins/audioplayer/style.css b/plugins/audioplayer/style.css
new file mode 100644
index 00000000000..689a04940ed
--- /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;
+}
+