Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    I.E. is scitzofrenic

    Hi folks, What's wrong with sound in Internet Explorer 9?
    I made two HTML files, both calling a function Afspil (Play) from inside another function. One works with IE (and Firefox and Crome). The other doesn't work in IE, but works in Firefox and Crome.
    I could attach coding and sound and images in a zip-file. Maybe I have now.
    Sound is defined in <body> by
    Code:
      <audio id="audio1" src="oef.mp3" preload="auto"></audio>
    Play-function (in <head>) is
    Code:
        function Afspil(soundobj) {
          var thissound=document.getElementById(soundobj);
          thissound.play();
        }
    in both HTML-files.
    The working calling procedure is
    Code:
        function SpilKald() {
          Afspil('audio1');
          setTimeout('SpilKald()',3000)
        }
    repeating the sound every 3 seconds. Theese are the calls:
    Code:
        <p><form>
        <input type="button" value="Play Sound" onClick="Afspil('audio1')">
        </form></p>
        <p><form>
        <input type="button" value="Play Function" onClick="SpilKald()">
        </form></p>
    The failing function is long:
    Code:
    function Flyt(LagNavn) {
      var lagObj;
      var lagStreng;
      var x1 =600, y1 = 200;   //startpunkt (600,200)
      var x2 =-353, y2 = 350;  //slutpunkt (-353,350)
      lagStreng = "document.getElementById('" + LagNavn + "')";
      lagObj = eval(lagStreng);
      y = parseInt(lagObj.style.top);
      dy = Math.abs(y-y2)/(y-y2);
      y = y - dy;
      x = -0.089*y*y+40*y-4000;
      if (x>=x2) {
        lagObj.style.top = y;
        lagObj.style.left = x;
        pigs.width = (y-y1)/(y2-y1)*353*350/300;
        pigs.height = (y-y1)/(y2-y1)*214*350/300;
      } else {
        lagObj.style.top = 202;
        lagObj.style.left = 594;
        pigs.width = 1;
        pigs.height = 1;
      }
      if(y==250||y==290) {
      Afspil('audio1')
      }
      setTimeout('Flyt("'+LagNavn+'")',30)
    }
    Flyt means: move, lag:layer, pigs is an ID for a <div> containing an image.
    IE stops before playing the sound (oef.mp3) displaying an error in Afspil: object 'thissound' does support property or method 'Play'. The same object supported 'Play' in the working file.
    The function Flyt moves the image in the layer along a parabola, playing the sound, when y is 250 or 290.
    You can check it at www.amtrup.dk/DHTML/flypigs.htm
    What is wrong? sometimes 'thissound.play' works, and sometimes it doesn't.
    Yours Torben
    Attached Files Attached Files

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by Torben View Post
    Hi folks, What's wrong with sound in Internet Explorer 9?
    The code in that page is of terrible quality.

    One of the code quality issues involves a missing document type declaration, <!doctype html>, which should be located at the beginning of the document. Without that, your page is displayed in quirks mode. IE's quirks mode tries to display pages as they would have be rendered in IE5. IE5 doesn't support the audio element or its JavaScript API, so the audio fails to play.

    In short: you need to put <!doctype html> at the start of the code. You can verify that this fixes things by typing document.getElementById("audio1").play() in the IE console before and after the change. After the change, the error message is no longer presented and the oink sound plays.

    With that fix, your page will work in no browser, because it's assigning integer values to CSS properties that require lengths. CSS lengths should end with a unit like px; quirks mode relaxes that rule and lets you get away with using integers. After that fix, shown below, your page works in Chrome 32, Firefox 27, and IE9.

    Code:
    lagObj.style.top = y.toString() + "px";
    lagObj.style.left = x.toString() + "px";
    // ...
    lagObj.style.top = ((202).toString() + "px");
    lagObj.style.left = ((594).toString() + "px");
    Also worth noting: Opera 19 doesn't play anything before or after the changes. IE11 plays truncated oinking sounds before and after the changes. I'm not sure what the causes of these issues are as I didn't look into them.

    The rest of your code could be written with much better practice. In particular, you should avoid use of the eval method, and use CSS for document presentation instead of presentational HTML elements and attributes or table elements.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Torben (02-16-2014)

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Dear Arbitrator
    Problem solved! Thank you very much for an excllent explanation! And who needs Opera and Safari?
    Greetings Torben

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Torben View Post
    And who needs Opera and Safari?
    Greetings Torben
    Both of those browsers have a larger number of people using them than use IE9.

    Almost no one uses IE9 any more. People using IE are either still using IE8 or are using IE10 or 11.

    So getting it to work in Opera and Safari is more important than getting it to work in IE9 if you want it to work for the most visitors.

    Also if it doesn't work in Opera or Safari then it almost certainly isn't going to work in Google Chrome as well since all three of those use the same rendering engine.
    Last edited by felgall; 02-16-2014 at 06:13 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    Torben (02-17-2014)

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by Torben View Post
    And who needs Opera and Safari?
    I test in Opera mostly out of habit. Plus, I used the browser for several years before they decided to turn it into a Google Chrome clone (albeit with a more elegant interface) while stripping all of the unique functionality available in previous versions of the browser, so maybe I just find it personally meaningful.

    That said, I was a bit surprised to see (hear) that your audio didn't work in Opera, but worked in Chrome since they use the same rendering engine now. I looked into this and, apparently, the problem is that Opera doesn't support the MP3 format due to patent issues. (Per Wikipedia, the last US patents expire in 2017. Firefox gets around this issue by utilizing native OS support to play the format.)

    The obvious solution is to provide an alternative format that Opera supports which would include Ogg Vorbis and WAVE. That should be trivial if you have an audio conversion utility such as dBpoweramp.

    Alternatively, I found that Opera can play the format with a plugin such as QuickTime, but QuickTime doesn't handle audio elements. You have to use the embed element to take advantage of the plugin. Because the embed element doesn't have a play method defined, this means adding and deleting copies of the element to and from the DOM to create the sound effect. The embed element is also visible by default, so you'd have to suppress its appearance with something like position: absolute; width: 0; height: 0. Of course, while this solution avoids the need to create a second file, it ultimately depends on having a plugin, so is less reliable.

    As for Safari, I don't own a Mac, so I can't test pages in it.

    I would be concerned about IE11, at least. I have no idea why the sound effect is being shortened.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Dear Stephen
    Oups. I didn't know about what you said about Safari and Opera.
    Now (suddenly) my Safari played the oink sound! But my newly downloaded Opera 19.0 doesn't.
    I have read
    (https://developer.mozilla.org/en-US/..._media_formats), that Opera doesn't support mp3 sound.
    Can I do anything about Opera?
    Greetings Torben

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    html5 audio support is all over the place when it comes to different browsers and file formats. Here's a page that explains it all and gives some tips on fallbacks

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by Torben View Post
    But my newly downloaded Opera 19.0 doesn't.
    I have read
    (https://developer.mozilla.org/en-US/..._media_formats), that Opera doesn't support mp3 sound.
    Can I do anything about Opera?
    This is the way I would do it:

    1. Download and install the dBpoweramp trial program located at http://www.dbpoweramp.com/dmc.htm. (Click "Try Reference free for 21 days".)
    2. Download and install the dBpoweramp Ogg Vorbis codec located at http://www.dbpoweramp.com/codec-central-ogg-vorbis.htm. (Click "Ogg Vorbis Release 22".)
    3. Open the "dBpoweramp Music Converter" utility. (The trial includes multiple utilities.)
    4. You'll be prompted to selected the file. Select the MP3's source file or the MP3 file itself. (You'll sacrifice some audio quality if you do the latter because Ogg Vorbis, like MP3, is a lossy audio format.)
    5. Change the "Convert To" field value to "ogg vorbis".
    6. Click "Convert >>".
    7. Change the generic *.ogg file extension of the output file to the more specific *.oga extension (which indicates Ogg audio).
    8. Add the fallback file info to your audio element with the preferred file's source element occurring first in the source code. Example:

      Code:
      <audio>
      	<source type="audio/mpeg" src="oink.mp3"/> <!-- preferred file -->
      	<source type="audio/ogg; codecs=vorbis" src="oink.oga"/> <!-- fallback file -->
      </audio>
      You can see a live version of an audio element utilizing code similar to the above at https://patrick.dark.name/web.dev/de...io.playback.1/.
    9. Make sure your server's HTTP headers are configured correctly for both MP3 and Ogg audio files. If your server is Apache, this can be forced with the following code in an .htaccess file:

      Code:
      addtype "audio/mpeg" .mp3
      addtype "audio/ogg; codecs=vorbis" .oga
    10. You're done.

    Quote Originally Posted by Torben View Post
    Dear Stephen
    You might have felgall or me confused with VIPStephan.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Arbitrator View Post
    You might have felgall or me confused with VIPStephan.
    felgall === Stephen
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    Arbitrator (02-17-2014)

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    Quote Originally Posted by glenngv View Post
    felgall === Stephen
    Oh, I see. I just noticed the name in the sig.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm sorry. Felgall's reply ended with

    Also if it doesn't work in Opera or Safari then it almost certainly isn't going to work in Google Chrome as well since all three of those use the same rendering engine.
    __________________
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.
    Last edited by felgall; 02-16-2014 at 07:13 PM..
    So I supposed that Felgall's real name was Stephen

    Many thanks to Arbitrator for clarifying the use of .ogg files for me.

  • #12
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Quote Originally Posted by Torben View Post
    […] I supposed that Felgall's real name was Stephen
    It is. And your last post, which was hidden in the moderation queue, has kindly been approved by VIPStephan.

  • #13
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This problem is solved . Thank you, and where do I click to tell / close it?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •