commit
49c2efee27
@ -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 |
@ -0,0 +1,66 @@ |
||||
OC_AudioPlayer = new Object(); |
||||
|
||||
OC_AudioPlayer.playAudio = function(dir, file, type) { |
||||
var path = WEBROOT + '/files/api?action=get&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', 'controls'); |
||||
audio.setAttribute('preload', 'auto'); |
||||
audio.setAttribute('autoplay', 'autoplay'); |
||||
audio.setAttribute('autobuffer', 'autobuffer'); |
||||
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); |
||||
}
|
||||
|
||||
// only register "play" option for file formats the browser claims to support
|
||||
OC_AudioPlayer.formats = { |
||||
'audio/mpeg':"mp3", |
||||
'audio/ogg':"ogg", |
||||
'application/ogg':"ogg", |
||||
'audio/wav':"wav", |
||||
'audio/wave':"wav", |
||||
'audio/x-wav':"wav", |
||||
'audio/basic':"au", |
||||
'audio/x-aiff':"aif" |
||||
}; |
||||
var audio = document.createElement('audio'); |
||||
for(format in OC_AudioPlayer.formats) { |
||||
if (!!(audio.canPlayType) && (audio.canPlayType(format) != "no") && (audio.canPlayType(format) != "")) { |
||||
if(!OC_FILES.fileActions[format]) { |
||||
OC_FILES.fileActions[format] = new Object(); |
||||
} |
||||
OC_FILES.fileActions[format].play = function() { |
||||
OC_AudioPlayer.playAudio(this.dir, this.file, this.mime); |
||||
} |
||||
OC_FILES.fileActions[format]['default'] = OC_FILES.fileActions[format].play; |
||||
} |
||||
} |
@ -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'); |
||||
?> |
@ -0,0 +1,15 @@ |
||||
<?xml version="1.0"?> |
||||
<plugin version='1.0'> |
||||
<info> |
||||
<id>audioplayer</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> |
||||
|
@ -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; |
||||
} |
||||
|
Loading…
Reference in new issue