Installing SoundManager2 now has great looking 360° Players with Spectrum/EQ visualizations. Can be embeded in WordPress. Source Code is same of SoundCloud. Obviously, without a Content Delivery Network, the loading will be slower. We recommend to use a streaming CDN like Akamai, Rackspace Cloud Files etc. Please provide time for reading this guide. Each and every sentence is important.
Preface to Installing SoundManager2
You can read two very important guides for better understanding of the practical usage of Streaming Media :
Rackspace Cloud Files and Flowplayer
---
Embedding Streaming Video From Rackspace Cloud Files in WordPress
The above two guides has very little to do directly with Installing SoundManager2. The importance is that – if you use a streaming CDN for the media files, the effect of loading will be instant, you can serve the CSS and javascripts from non-SSL CDN. In case you are delivering on a SSL enabled domain, you must use all the static files from the SSL enabled CDN, otherwise you will face mix content error. SSL URL itself will increase the page loading time as there will be the SSL negotiation.
Source codes for Installing SoundManager2 can be found here :
1 | https://github.com/scottschiller/SoundManager2 |
As you can see in the screenshot, the PSD file is included in the demo folder. Demo usually is enough for the average users. Otherwise you have to code yourself :
1 | http://www.schillmania.com/projects/soundmanager2/doc/getstarted/ |
Installing SoundManager2 With Great 360° Player
Installing means uploading the files after proper changes. The xml file will serve the work of saving data for advanced usage, otherwise the Demo instances are enough.
Example :
1 | http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html |
Click the play icon of each player to see the effect. You will get the same things in the zip download from Github, inside the demo folder.
In case of WordPress, you can insert in two ways; first via inline CSS and Javascripts through post. One of such example can be the guide to add Font Emboss, 3D Effect, Animated Effect Using Google Font API. I can not give warranty for Microsoft’s odd browser Internet Explorer, all ‘normal’ standard browsers except IE can load them if embedded in this way. That includes the mobile browsers too.
Another way to use is to use PHP to load the javascripts and CSS and adding the video specific code for the player manually :
// load SoundManager2 Stylesheet// childtheme is a vague name, replace with yours function childtheme_create_stylesheet($content) { $content .= "t"; $content .= " <link rel="stylesheet" type="text/css" href=""; $content .= get_bloginfo('stylesheet_directory') . '/'; $content .= 'inlineplayer.css'; $content .= "" />"; $content .= "nn"; return $content; } add_filter('childtheme_create_stylesheet', 'childtheme_create_stylesheet');// SoundManager2 Javascript function childtheme_scripts() {//Close PHP if required by uncommenting//?>// domain, child themes are vague names <script type="text/javascript" src="http://domain/wp-content/themes/childtheme/js/soundmanager2.js"></script> <script type="text/javascript" src="http://domain/wordpress/wp-content/themes/childtheme/js/inlineplayer.js"></script>//Uncomment php start if needed//< ?php }add_action('wp_head','childtheme_scripts');
There is absolutely no support for the code and distributed under GNU GPL 3.0 Licence. It will work with Genesis Framework, Thematic Themes (both tested) after modifications and obviously tweak will be needed for other themes. For Genesis, you can combine the functions, add shortcodes etc. Please check Genesis Themes official and unofficial guides. I have not searched for WordPress Plugin, there can be plugins.