Basic HTML5 audio player plugin

This commit is contained in:
ente 2010-12-04 17:37:34 +01:00
parent a576150b64
commit fd0e0d675e
5 changed files with 107 additions and 0 deletions

View File

@ -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

View File

@ -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;

View File

@ -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');
?>

View File

@ -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>

View File

@ -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;
}