Jplayer doesnot supported in the IE10

Question

My jQuery Code:

<script type="text/javascript">
        $(document).ready(function () {
            $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {

                        oga: "/sound/cookingloop.ogg"
                    });
                },
                swfPath: "/js",
                supplied: "oga"
            });
        });
</script>

HTML code:

div id="jquery_jplayer_1">
    </div>
    <div id="jp_container_1">
        <a href="#" class="jp-play">Play</a>
        <a href="#" class="jp-pause">Pause</a>
    </div>

Sound is not played in IE but worked correct in the Chrome And Firefox. Any help is appreciated.

Answer 1

Maybe you need to improve it a little to make it work as you want. and look for the flash object ;)

 function getAudioPlayer($song_path_mp3, $song_path_ogg){
    if($song_path_mp3 == null){
       //add something in case the path is null.. or some logic
       //to add the path to the song, so you only pass the name of the file.
    } 

    if($song_path_ogg == null){
       //add something in case the path is null.. or some logic
       //to add the path to the song, so you only pass the name of the file.
    }

    $audio_object = '
            <!-- start: music player -->
            <audio id="audio_with_controls" loop="loop" autoplay="autoplay" controls="controls">
                <source src="path.mp3" type="audio/mpeg" />
                <source src="path.ogg" type="video/ogg">
                <object class="playerpreview" type="application/x-shockwave-flash"
                          data="<?php echo get_template_directory_uri();?>/flash/player_mp3_mini.swf" width="200" height="20" style="display:none;">
                    <param name="movie" value="<?php echo get_template_directory_uri();?>/flash/player_mp3_mini.swf" />
                    <param name="bgcolor" value="#000000" />
                    <param name="play" value="true">
                    <param name="loop" value="true">
                    <param name="FlashVars" value="mp3=path.mp3" />
                    <embed href="<?php echo get_template_directory_uri();?>/flash/player_mp3_mini.swf" bgcolor="#000000" width="200"
                           height="20" name="movie" align="" 
                           type="application/x-shockwave-flash" play="true" loop="true" flashvars="mp3=path.mp3">
                    </embed>
              </object>
              o
            </audio>
            <style type="text/css">
                .audio_with_controls, .playerpreview, #player_fallback{display: none;}
            </style>
            <script src="http://www.google.com/jsapi"></script>
            <script>google.load("swfobject", "2.2");</script>
            <div id="player_fallback" style="display:none;"></div>
            <script>
              if (document.createElement("audio").canPlayType || document.createElement("video")) {
                if (!document.createElement("audio").canPlayType("audio/mpeg") || !document.createElement("video").canPlayType("video/ogg")) {
                    var params = {
                        play: "true",
                        loop:"true",
                        bgcolor: "#000000",
                    }
                  swfobject.embedSWF(
                    "<?php echo get_template_directory_uri();?>/flash/player_mp3_mini.swf",
                    "player_fallback",
                    "200",
                    "20",
                    "9.0.0",
                    "",
                    {"mp3":"path.mp3"}, params);
                }
              }
            </script>
            <!-- end: music player -->

    ';
 }

you can find the player here remember you need to change get_template_directory_uri() to whatever you need, since that is a wordpress function which returns the template url ;-)