www.webdeveloper.com
Results 1 to 8 of 8

Thread: Alternative to onClick for mobile browsers

  1. #1
    Join Date
    Jul 2013
    Posts
    4

    Exclamation Alternative to onClick for mobile browsers

    My goal is to have the user click a button/image and have an audio file play WITHOUT launching the client's media player. I have been able to successfully do it on a computer browser with onClick, but I know I can't do that for mobile browsers.


    Here's my current code. What do I need to change to have it work on BOTH a computer (onClick) and a tablet/smartphone (I've tried just adding an onTouchStart, but that doesn't work)?

    Code:
    <script language="javascript" type="text/javascript">
         function playSound(soundfile) {
         document.getElementById("dummy").innerHTML=
         "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    }
    </script>
    HTML Code:
    <area shape="rect" coords="34,479,509,593" href="#" onTouchStart="playSound('audio/Memo.m4a')" onclick="playSound('audio/Memo.m4a')">
    Please help. Thanks!

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Is the onTouchStart event even firing? I don't have a tablet/smartphone so I can't test, but try putting an alert at the beginning of playSound() so you know when it fires.

  3. #3
    Join Date
    Jul 2013
    Posts
    4
    On a smartphone, nothing happens when you click the button (other than the url updating to a "/#") at the end of it.

    How do I add an alert to it? (can you provide code?) Thanks....BTW, i'm a newbie.

    Quote Originally Posted by tenfold View Post
    Is the onTouchStart event even firing? I don't have a tablet/smartphone so I can't test, but try putting an alert at the beginning of playSound() so you know when it fires.

  4. #4
    Join Date
    Jun 2008
    Posts
    106
    Code:
    <script language="javascript" type="text/javascript">
    function playSound(soundfile) {
        alert('playSound() is being executed.');
        document.getElementById("dummy").innerHTML = '<embed src="' + soundfile + '" hidden="true" autostart="true" loop="false" />';
    }
    </script>

  5. #5
    Join Date
    Jul 2013
    Posts
    4

    "Playsound" is being fire...

    Thanks @tenfold. Okay, yes, I go get an alert when I tap the button that it is firing...but it doesn't play the audio message.

    Is it possible that I need more than just the ontouchstart()?


    Quote Originally Posted by tenfold View Post
    Code:
    <script language="javascript" type="text/javascript">
    function playSound(soundfile) {
        alert('playSound() is being executed.');
        document.getElementById("dummy").innerHTML = '<embed src="' + soundfile + '" hidden="true" autostart="true" loop="false" />';
    }
    </script>

  6. #6
    Join Date
    Jun 2008
    Posts
    106
    Hmm not sure. At least the function is triggered. Maybe someone else can offer some advice.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Does your phone play the music with any other browser?
    Maybe your browser does not recognize the embed tag.

  8. #8
    Join Date
    Dec 2012
    Posts
    97
    Try using a HTML audio element and trigger the play function

    Code:
    <audio src="sound.mp3" id="sound"/>
    
    <script language="javascript" type="text/javascript">
    function playSound() {
        document.getElementById("sound").play();
    }
    </script>

Thread Information

Users Browsing this Thread

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

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