www.webdeveloper.com
Results 1 to 11 of 11

Thread: onLoad() driving me crazy!

  1. #1
    Join Date
    Jan 2009
    Posts
    12

    onLoad() driving me crazy!

    here's what I'm trying to do:
    I have a web application, and the users have 4-gen ipod touch devices and connect to the webserver on a local network

    the ipods use Atomic-Web, which is very similar to mobile safari

    part of the system includes a messaging service

    so, when the page loads and there is an "unread" message the page shows an email icon that prompts users to click it to read their message

    i want to auto-play an MP3 file, like a notification chyme...

    So far I've done this:

    <audio src="mysound.mp3" id="you_got_mail">
    <body onload="javascript:document.getelementbyid('you_got_mail').play;">


    This does not work.

    However, if I do this:

    <audio src="mysound.mp3" id="you_got_mail">
    <input type="button" value="CLICK" onclick="javascript:document.getelementbyid('you_got_mail').play;">

    This works fine, and if the user clicks the button you can hear the sound

    Obviously I want the sound to play onload, not onclick!!!

    any ideas anyone??

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The token javascript: is archaic, and should work only in case of links, it is an address bar token, not a code-in-line one. Launch that method straight. Put this in the HEAD section of your document.
    Code:
    <script type="text/javascript">
    onload=function(){
    document.getelementbyid('you_got_mail').play
    }
    </script>
    And remove the onload from the BODY tag.

  3. #3
    Join Date
    Jan 2009
    Posts
    12
    ok, thanks I will try that!
    b.

  4. #4
    Join Date
    Jan 2009
    Posts
    12
    Quote Originally Posted by Kor View Post
    The token javascript: is archaic, and should work only in case of links, it is an address bar token, not a code-in-line one. Launch that method straight. Put this in the HEAD section of your document.
    Code:
    <script type="text/javascript">
    onload=function(){
    document.getelementbyid('you_got_mail').play
    }
    </script>
    And remove the onload from the BODY tag.
    sorry that didn't work

    it works with IE and chrome on my desktop but it does not work with the ipod browser...

    if I click the button it works, but no auto-play

    i even tried this:


    Code:
    <script> 
    	window.onload=function(){ 
    		setTimeout(function () { document.getElementById('sound1').play(); }, 2000); 
    	} 
    </script>
    ... which also works (with a 2 sec delay) on IE and chrome, but not the ipods...

  5. #5
    Join Date
    Jan 2009
    Posts
    12
    hmm i think the problem is with the webkit browser, it simply can not deal with the window.onload properly

    i have tried:

    Code:
    <script type="text/javascript">
     var audioElement = document.createElement('audio');
     audioElement.setAttribute('src', 'alarm.mp3');
     audioElement.play();
    </script>
    this works fine on the desktop browsers...

    with the ipods, I have seen a solution that involves 'sniffing' when the document is ready, and tried this:


    Code:
     		<script type="text/javascript">
    		if (/WebKit/i.test(navigator.userAgent)) { // sniff
     		   var _timer = setInterval(function() {
            		if (/loaded|complete/.test(document.readyState)) {
           				var audioElement = document.createElement('audio');
            			audioElement.setAttribute('src', 'alarm.mp3');
    		    	    audioElement.play();
            		}
        		}, 1000);
    		}
    	    </script>
    but no luck

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    This would be better
    Code:
    <script type="text/javascript">
    onload=function(){
    document.getElementById('you_got_mail').play
    }
    </script>

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by 007Julien View Post
    This would be better
    Code:
    <script type="text/javascript">
    onload=function(){
    document.getElementById('you_got_mail').play
    }
    </script>
    Yeap. I missed that. I forgot to put my glasses

  8. #8
    Join Date
    Jan 2009
    Posts
    12
    i wish it was that simple!
    the user-initiated methods, ie onclick, work fine, so it can't be a script error

    i'm starting to think this might be an IOS restriction
    Apple seem to not like the idea of audio (or video) auto-playing when a page loads, but it's ok if a user initiates this

    I'm still trying to find a work-around...


  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by bazaarboy View Post
    i wish it was that simple!
    the user-initiated methods, ie onclick, work fine, so it can't be a script error
    No way. As long as you have written getelementbyid() there is absolutely no possibility for that to work fine, nor in any other way. Moreover, I suspect that you would like to call a method, thus it should be:

    Code:
    document.getElementById('you_got_mail').play()

  10. #10
    Join Date
    Jan 2009
    Posts
    12
    I'm not suggesting that getelementbyid() works, in the server environment it was formatted correctly, yet still does not auto-play the audio, whereas the onClick hander works...

    the problem I'm dealing with is not a simple formatting / spelling issue
    it looks like IOS devices are hard-wired not to autoplay audio, eg on page loading, but rather need active user initiation

  11. #11
    Join Date
    Jan 2009
    Posts
    12
    ok, I've found a fix for this, here's a very good implementation of a work-around:
    ios devices playing audio in web pages

    it seems that Apple tried hard to prevent audio and video autoplaying in their IOS devices

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles