BatmoAudioPop.js + Wordpress + WMP = sometimes works?

Discussion in 'Web Design and Development' started by Brendon Bauer, Jul 28, 2008.

  1. Brendon Bauer macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #1
    Here's the deal: On our website we use wordpress to host our podcast of audio sermons. We've tried to make the sermons as universally accessible as possible by using the BatmoAudioPop.js file. You can read more about that here: http://www.oreillynet.com/pub/a/ore...1/build-a-better-web-audio-player.html?page=2.

    Anyhow, the problem is that for some odd reason the sermons will not play on Windows. Basically if the user does NOT have Quicktime and uses the latest version of Firefox (or the latest version of IE) some sermons will play and others won't. For example try this out: Go to http://www.summitnorthwest.org/sermonaudio/ with a windows computer on Firefox (or IE) without quicktime installed. Try playing the most recent post (July 19). It will pretend like it'd loading or something, but wont play. Next try to play the 2nd most recent post (July 12). This one should work. And then the next most recent (June 28) does not work. I've tested this on my MBP running windows using Firefox and IE, and on another HP computer using Firefox and IE and I get the same results. My MBP has Windows Media Player v9 and the HP had Windows Media Player v11.

    Why the heck is it not working?

    If you're interested, here is the exact code copy&pasted from the most recent post that does NOT work (July 19):
    Code:
    Speaker: Amy Heald <br />
    Date: 7/19/08 <br />
    Comments: <br />
    <table><tr><td><img src="http://www.summitnorthwest.org/sermons/mp3.png" width="30" /></td><td valign="middle"><a href="http://www.summitnorthwest.org/sermons/2008/07.19.08.mp3" onclick="javascript:BatmoAudioPop('The Story',this.href,'1'); return false" target="_blank">Listen to Sermon</a></td></tr></table>
    And from the 2nd most recent post that DOES work (July 12):
    Code:
    Speaker: Ron Hessel <br />
    Date: 7/12/08 <br />
    Comments: <br />
    <table><tr><td><img src="http://www.summitnorthwest.org/sermons/mp3.png" width="30" /></td><td valign="middle"><a href="http://www.summitnorthwest.org/sermons/2008/07.12.08.mp3" onclick="javascript:BatmoAudioPop('There is no good title for this sermon: It\'s just ugly',this.href,'1'); return false" target="_blank">Listen to Sermon</a></td></tr></table>
    Also here is batmoaudiopop.js which is included at the top of the page via
    Code:
    <script src="http://www.summitnorthwest.org/sermons/BatmoAudioPop.js" type="text/javascript"></script>
    BatmoAudioPop.js:
    Code:
    // Pop-Up Embedder Script by David Battino, www.batmosphere.com
    // Version 2006-05-31  
    // OK to use if this notice is included
       
    function BatmoAudioPop(filedesc,filepath,WindowNumber) 
    {
    
    // Get Operating System 
    var isWin = navigator.userAgent.toLowerCase().indexOf("windows") != -1
    if (isWin) {
        // Use MIME type = "application/x-mplayer2";
    	visitorOS="Windows";
    } else {
        // Use MIME type = "audio/mpeg"; // or audio/x-wav or audio/x-ms-wma, etc.
    	visitorOS="Other";
    }
    
    // Get the MIME type of the audio file from its extension (for non-Windows browsers)
    var mimeType = "audio/mpeg"; // assume MP3/M3U
    var objTypeTag = "application/x-mplayer2"; // The Windows MIME type to load the WMP plug-in in Firefox, etc.
    
    var theExtension = filepath.substr(filepath.lastIndexOf('.')+1, 3); // truncates .aiff to aif
    if (theExtension.toLowerCase() == "wav") { mimeType = "audio/x-wav"};
    if (theExtension.toLowerCase() == "aif") { mimeType = "audio/x-aiff"}; 
    if (theExtension.toLowerCase() == "wma") { mimeType = "audio/x-ms-wma"};
    if (theExtension.toLowerCase() == "mid") { mimeType = "audio/mid"};
    // Add additional MIME types as desired
    
    if (visitorOS != "Windows") { 
    objTypeTag = mimeType; // audio/mpeg, audio/x-wav, audio/x-ms-wma, etc.
    };
    
        PlayerWin = window.open('',WindowNumber,'width=320,height=217,top=75,left=75,screenX=75,screenY=75,resizable=0,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0');
    
        PlayerWin.focus();
        PlayerWin.document.writeln("<html><head><title>" + filedesc + "</title></head>");
        PlayerWin.document.writeln("<body bgcolor='#7D87BC'>"); // specify background img if desired
        PlayerWin.document.writeln("<div align='center'>");
        PlayerWin.document.writeln("<b style ='font-size:18px;font-family:Lucida,sans-serif;line-height:1.6'>" + filedesc + "</b><br />");
        PlayerWin.document.writeln("<object width='280' height='69'>");
        PlayerWin.document.writeln("<param name='src' value='" +  filepath + "'>");
        PlayerWin.document.writeln("<param name='type' value='" + objTypeTag + "'>");
        PlayerWin.document.writeln("<param name='autostart' value='1'>");
        PlayerWin.document.writeln("<param name='showcontrols' value='1'>"); 
        PlayerWin.document.writeln("<param name='showstatusbar' value='1'>");
        PlayerWin.document.writeln("<embed src ='" + filepath + "' type='" + objTypeTag + "' autoplay='true' width='280' height='69' controller='1' showstatusbar='1' bgcolor='#7D87BC' kioskmode='true'>");
        PlayerWin.document.writeln("</embed></object></div>");
        PlayerWin.document.writeln("<p style='font-size:12px;font-family:Lucida,sans-serif;text-align:center'><a href='" + filepath +"'>Download this Sermon</a> <span style='font-size:10px'>(right-click)</span></p>");
        PlayerWin.document.writeln("<form><div align='center'><input type='button' value='Close this window' onclick='javascript:window.close();'></div></form>");
        PlayerWin.document.writeln("</body></html>");
    
        PlayerWin.document.close(); // "Finalizes" new window
    }
    Thanks for taking the time to help me out :)
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Sorry, I'm confused by all these possibilities, no disrespect intended.

    Mind if I make a general observation and some advice?

    These days Adobe Flash is being used to stream audio and video because Flash is supported in 98% of the machines out there, and of those a solid 50% are kept up to date with the latest Flash version. Nothing else even comes close, plus QuickTime, Real Audio/Video and Windows Media all require proprietary plugins based on the operation system environment in which they run. In addition, your method relies upon JavaScript which is another layer that runs client side.

    Instead of working with numerous mime types, which are associated with plugins downloaded to and run on the client side, dealing with browser plugin and support issues, and ending up having to create a requirements page for your users covering all these myriad possibilities...

    Switch over to Flash, there are plenty of freeware and inexpensive shareware utilities to convert audio and video in every single codec to an .swf file or .flv for video. You can easily stream this over a standard connection, Flash when used in this manner has a small memory footprint plus you can design a no frills or feature laden GUI as you wish. When you integrate this into your page and extend (not rely upon, huge difference) Flash (control it's behavior, i.e. start/stop/pause the player, adjust volume automatically, etc.) via the JavaScript API or SWFObject - to name two. All free, open source solutions. You'll then only require users to have Flash, which as I noted earlier is far, far less a headache in terms of availability and cross-platform support than the other methods for this same purpose. Play audio in the background complete with player in kiosk mode, hide the player but stuffing it into a hidden div, etc., etc., etc.

    I apologize if this reply seems off-topic and misleading. This is just a suggestion to simplify the process in the long run and avoid the numerous pitfalls associated with traditional browser plugins and multimedia players.

    -jim
     
  3. Brendon Bauer thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #3
    Well, that does sound like a good idea but here's the problem: We also use this wordpress installation as a podcast. Feedburner takes the mp3s directly out of the posts and creates a podcast for us. If it was .swf files, it wouldn't work nicely with the podcast/itunes, would it?

    Thanks for actually responding. I'm sure most people don't even bother to read when they see how confusing/long the post is :rolleyes:. I tried to do my best. It's just that this system we've used has worked perfectly for so long... and there are so many posts that use this method. I realize that we'd keep supporting this method for older posts and switch to flash from a certain point on, but I don't see how we could continue to support the podcast.
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    As a quick followup I was referring only to a Flash player, and there are plenty of choices out there for streaming MP3's on a web site using Flash. There is no need to convert an MP3. Unless I am misunderstanding something in your web site requirements (which is possible).

    Now, back to the original question and your original software!

    I looked at your code snippets and how your JS creates the stream. I think you should visit this web site which has code examples about streaming MP3's for Windows Media Player, all versions, using object/embed coding. Check your code against examples on that very, very helpful page to see if you missed something obvious. Hope this helps!

    -jim
     
  5. Brendon Bauer thread starter macrumors 6502

    Joined:
    May 14, 2007
    Location:
    Good 'ol USofA
    #5

Share This Page