New music visualization plugin Created Jul 19, 2009

Another example:



HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>

JavaScript coding

Following script will install Flowplayer into our player container

<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
playlist: ['/img/demos/national.jpg', 'http://releases.flowplayer.org/data/fake_empire.mp3'],
plugins: { 
      visual: { 
        url: 'http://flowplayer-releases.s3.amazonaws.com/swf/flowplayer.audiovisual-3.1.0-dev.swf',
        width: '100%',
        height: 70,
        bottom: 0,
        left: '50%',
        followScreen: false
      },
     controls: { autoHide: 'always', opacity: 0.5, width: '80%', borderRadius: 10, bottom: 5, left: '50%', height: 20 }
  }, 
  onLoad: function() { 
     // set volume to MAX! 
     this.setVolume(100); 
  }
});
</script>

The audiovisual plugin appears to have been removed. Does anyone know where I can get it? I am running flowplayer 3.1.5 and the audio plugin to play mp3s and would like to spice it up a bit. Any help on getting this or a similar plugin is much appreciated.

You can find it here:
http://flowplayer-releases.s3.amazonaws.com/flowplayer.audiovisual/flowplayer.audiovisual-3.1.0-dev.zip

I've also fixed the plugin URLs in the examples above.

Does this plugin support RTMP streaming of mp3 files? I'm grabbing my clips from a Wowza server, have properly set up the visualization plugin as in the first example above, and all I get is a straight line that floats around. (That is, it appears that the plugin cannot get audio data, so is not rendering anything.)

Hmm. sounds like a bug. I'll take a look.

Thanks, I would definitely appreciate it!

Some more context information, should you need it:

mp3 files are being streamed from a default wowza install on mac os 10.5.8. These particular files are being generated by ffmpeg with the -ab 192k -ar 44100 -ac 2 flags set. I'm setting up flowplayer within the html document with:

$(function(){
  $f("player", "/flash/flowplayer-3.1.5.swf", { 
    clip: { 
        url: $("#player").attr("href"), 
        provider: 'rtmp',
        autoBuffering: true,
        scaling: 'fit'
    }, 
    plugins: { 
        rtmp: { 
            url: '/flash/flowplayer.rtmp-3.1.3.swf', 
            netConnectionUrl: 'rtmp://.../app' 
        },
        visual: $("#player").attr("class") == "audio"
          ? { url: '/flash/flowplayer.audiovisual-3.1.0-dev.swf' }
          : null
    } 
  });
});

The urls are rtmp identifiers of the form: mp3:file.mp3

Sorry for not supplying that context stuff earlier. Do you see anything in the above which would cause the audio-visualization plugin not to work?

@Ansii:
Nice work.

--
Chetan
http://riageeks.com

I can confirm that doesn't work with RTMP streams. I've tryed with MP4 audio and the plugin doesn't intercept the audio data when RTMP is enabled.

My Flowplayer version is 3.2.0 (compiled from sources) and audiovisual plugin is the latest I can find in SVN repository.

My server is FMS 3.5 and this is my player config:

$(function(){$f("player1", "flash/player/player.swf", {

playlist:["rtmp://xxxxx.xxx/mp4:audio.mp4"],
onLoad: function() {
   this.setVolume(100);
},
plugins:{
rtmp:{url:"rtmp.swf"},
	audiovisual:{
                url:"audiovisual.swf",
		width: '100%',
                followScreen: true
        },
controls:{url:"controls.swf",autoHide:"true"}
}})});

Is there a working live example to properly test.

I love this plugin and have installed on my site but when I replace the sample mp3 with one of my mp3 files it doesnt visualize at all - it just plays the music. Any idea why that is? I was able to use the sample mp3 in the exact same place in the code and it works

any help is greatly appreciated.

as an additional note I copied the test mp3 file to my server and it doesnt work from their either - is there some companion file to the mp3 to make it work?

Can you post a link to that problematic mp3 file? Or send it to us in email at info at flowplayer.org

Thanks for the reply - I actually copied the test mp3 to my own server and it didnt work - so in other words with all the exact same code and the audio file referenced from the same server as above, it works - but from my server, and all the other code exactly the same it plays audio but no visualization

Could be a flash security related issue if the player and the plugin SWF files are loaded from another domain. Are you loading the SWF files also from your server (your domain)?

Hi, I'm new to flowplayer and I must say it works great. I stumbled upon with this thread while looking for some way to add some sort of visualization to a streaming player I'm implementing. Contrary to what I read here, it indeed works with a RTMP stream. However, I would like to know if is there any way of making it translucent, and/or changing the default black background color for, say, an image?

Can I use this plugin with one player that plays mp4 videos and mp3 audios? I.e. there is playlist of clips like this

playlist = [{url:song1.mp3}, {url:video1.mp4}, {url:song2.mp3}]

Now if I load audiovisual plugin it plays it's animation on both video and audio. How can I make it to play visualisations only on audio tracks?

I've tried to hide visual plugin onBegin, onStart an other "on"-functions but when player goes fullscreen it always shows visualisation.

fixed this by editing sources of show() function like this:

...

if (_player.currentClip.originalUrl.indexOf("mp3:") != -1){
	log.debug("show(), playing audio " + _player.currentClip);
	if (followScreen) {
		//                var props:Object = { left: _screen.position.left.asObject(), top: _screen.position.top.asObject(), width: _screen.dimensions.width.asObject(), height: _screen.dimensions.height.asObject() };
		var props:DisplayProperties = _player.screen.clone() as DisplayProperties;
		log.debug("animating to screen pos", props);
		props.zIndex = 1;
		props.opacity = 1;
		_player.animationEngine.animate(this, props);
	} else {
		log.debug("not following screen");
		_player.animationEngine.fadeIn(this);
	}
}
else {
	log.debug("show(), playing video " + _player.currentClip);
	_player.animationEngine.fadeOut(this, 2000);
}

...