HTML5 tag and audio plugins

I’m looking into creating a site for a pastor friend/mentor where he can upload his audio sermons. Would love to step into the future and use HTML5 <audio> perhaps with a Flash fallback for IE. I’d like to set it up to where he (or someone else) can upload the files himself. This would probably be the only dynamic part of the site. The rest would be easy static stuff. Any suggestions on how to accomplish this?

[FYI: yes, I’ve read up on HTML5 <audio> and am aware of the different file types needed for different browsers, yada yada...]

hmm - this looks promising: http://code.google.com/p/html5media/

Displaying the videos is not at issue; any HTML5 or Flash will work in MODx, MODx doesn’t care about that sort of thing at all any more than a flat HTML page does.

The only thing for you to do as far as MODx is concerted is to have an easy upload feature. And that’s not too difficult; create a chunk with the necessary form and Javascript to upload a file, and use a snippet to display the form (or a link to a page with the form) only if the visitor is logged in correctly. And that’s easy enough to do by checking the SESSION. http://www.sottwell.com/article-sessions.html

Here’s the javascript that will connect your form field to the Resource Browser:

The tricky parts to this javascript code is to make sure you have the correct absolute urls and path (both from /) in the OpenBrowserWindow function, and to have the ID of the form’s field in the last line that loads the path to the movie in the form field. You can use this same code to open on the images directory or the files directory by changing the ?Type=media to ?Type=images or ?Type=files in the OpenBrowserWindow function.

You could use www.modernizr.com to check the browsers for
html5 support and for audio format support...

Quote from: sottwell at Mar 24, 2010, 11:54 PM

Displaying the videos is not at issue; any HTML5 or Flash will work in MODx, MODx doesn’t care about that sort of thing at all any more than a flat HTML page does.

The only thing for you to do as far as MODx is concerted is to have an easy upload feature. And that’s not too difficult; create a chunk with the necessary form and Javascript to upload a file, and use a snippet to display the form (or a link to a page with the form) only if the visitor is logged in correctly. And that’s easy enough to do by checking the SESSION. http://www.sottwell.com/article-sessions.html

Here’s the javascript that will connect your form field to the Resource Browser:

<script type="text/javascript">
function OpenServerBrowser(url, width, height ) {
	var iLeft = (screen.width  - width) / 2 ;
	var iTop  = (screen.height - height) / 2 ;

	var sOptions = 'toolbar=no,status=no,resizable=yes,dependent=yes' ;
	sOptions += ',width=' + width ;
	sOptions += ',height=' + height ;
	sOptions += ',left=' + iLeft ;
	sOptions += ',top=' + iTop ;

	var oWindow = window.open( url, 'FCKBrowseWindow', sOptions ) ;
}			
function BrowseServer() {
	var w = screen.width * 0.7;
	var h = screen.height * 0.7;
	OpenServerBrowser('/manager/media/browser/mcpuk/browser.html?Type=media&Connector=/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/home/domain/www/assets/', w, h);
}

	function SetUrl(url, width, height, alt){
	    document.getElementById('vFile').value = url;
	}
</script>

			<li>
				<label for="vFile">Select Movie File:</label>
				<div class="block">
					<input type="text" id="vFile" name="longtitle"  value="[+longtitle+]" /> <input type="button" value="Select Move File" onclick="BrowseServer()" />
				</div>
			</li>
<!-- End File Browser -->

The tricky parts to this javascript code is to make sure you have the correct absolute urls and path (both from /) in the OpenBrowserWindow function, and to have the ID of the form’s field in the last line that loads the path to the movie in the form field. You can use this same code to open on the images directory or the files directory by changing the ?Type=media to ?Type=images or ?Type=files in the OpenBrowserWindow function.

wow, thanks for this! I’m just learning javascript so I’m very thankful to have something like this to work with.

Quote from: charliez at Mar 25, 2010, 12:37 AM

You could use www.modernizr.com to check the browsers for
html5 support and for audio format support...

thanks, I’m familiar with Modernizr and I may use it, although the Google script I posted above does specifically what I need.