Flowplayer not showing audio player

Question

I am trying to have a video and audio in a html page. I kinda having the video working fine but the audio is not showing up. Any help would be appreciated

http://www.wholesalewealthmachine.com/abc/

        <div id="video" style="border: 1px solid rgb(204, 204, 204); width: 490px; height: 385px; margin:0 auto;">
                    <a  href="http://wholesaletoriches.com/newthankyouvideos/wwm new thankyou final/wwm new thankyou final.mp4"     style="display:block;width:470px;height:365px;padding:10px;"    id="player"> </a>
                                         <script type="text/javascript">
                                         flowplayer("player", "flowplayer-3.2.2.swf",{
                                        plugins: {
                                            controls: null

                                            },                                              
                                                canvas: {backgroundColor: '#ffffff',backgroundGradient: "none"}
                                                ,
                                        clip: {
                                            url: 'http://wholesaletoriches.com/newthankyouvideos/wwm new thankyou final/wwm new thankyou final.mp4'
                                            },
                                            onLoad: function() {
                                            this.setVolume(100);
                                            }}
                                            );
                                            </script> 

    </div>

    <div id="audio" style="width:750px;height:30px;display:block">
<a href="http://releases.flowplayer.org/data/fake_empire.mp3" style="display:block" id ="player1"></a>
<script language='javascript'>

  $f("audio", "http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf", {

// fullscreen button not needed here
plugins: {
    controls: {
        fullscreen: false,
        height: 30,
        autoHide: false
    }
},

clip: {
    autoPlay: false,

    // optional: when playback starts close the first audio playback
    onBeforeBegin: function() {
        $f("player").close();
    }
}

   });
   </script>
</div>  

Answer 1

You need to grab the Flowplayer Audio plugin from http://flowplayer.org/plugins/streaming/audio.html

then add this to your plugins parameters

plugins:{  audio:  { url: "http:/yourpathtotheaudioplugin/flowplayer.audio.swf"}  }

Answer 2

Credit to GraemeLeighfield at http://flowplayer.org/forum/2/47848

$f does not work. Instead of using $f use flowplayer. So it should look like:

flowplayer("audio", "http://releases.flowplayer.org/swf/flowplayer-3.2.6.swf", {...

This problem and the fix were reported in the Flowplayer forum just about one year ago. (see link) The developers of Flowplayer have not updated their documentation as far as I can tell. I had the same problem as Graeme. The fix he posted resolved the problem for me.

Answer 3

I've had trouble working though off site url's. It best if down load the code from flowplayer and load them onto your server.

Audio portion: http://flash.flowplayer.org/plugins/streaming/audio.html Scroll to bottom of page and down load 3 files flowplayer.audio-3.2.10.swf
flowplayer.audio-3.2.10.zip
flowplayer.audio-3.2.10-src.zip

Place them in root directory.(ex.) Flow-Player-Audio

Place this script in head

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>

<script src="http://www.domain.com/Flow-Player-Audio/flowplayer-3.2.6.min.js"></script>



<!-- set up player container  -->
<a id="mb" style="display:block;width:250px;height:30px;"
href="http://www.domain.com/audio/something.mp3 or mp4"></a>

<script type="text/javascript">
// install flowplayer into container
$f("mb", "http://www.domain.com/Flow-Player-Audio/flowplayer-3.2.7.swf", {

// fullscreen button not needed here
plugins: {
    controls: {
        fullscreen: false,
        height: 30,
        width: 250,
        autoHide: false
    }
},

clip: {
    autoPlay: false,
    // optional: when playback starts close the first audio playback
    onBeforeBegin: function() {
        $f("player").close();
    }

   }

 });
</script>

For video

down load http://flash.flowplayer.org/download/

grab Download ZIP and Source code

place in swf file on server

script files

      <!-- 1. jquery library -->
     <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
     </script>

     <!-- 2. flowplayer -->
     <script type="text/javascript" src="js/flowplayer.js"></script>

     <!-- 3. skin -->
     <link rel="stylesheet" type="text/css" href="skin/minimalist.css" />

then just add your video tags.