Question

I want to add a sound when the submit button in my form is pressed, but no matter what I do, the sound doesn’t finish. It is 1 second long, but the form is submitted under 1 second, so it sounds really bad. This is the code:

Creating the sound:

<script type="text/javascript">
    var html5_audiotypes={ 
        "mp3": "audio/mpeg"
    }

    function createsoundbite(sound){
        var html5audio=document.createElement('audio')
        if (html5audio.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var sourceel=document.createElement('source')
                sourceel.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
                html5audio.appendChild(sourceel)
            }
            html5audio.load()
            html5audio.playclip=function(){
                html5audio.pause()
                html5audio.currentTime=0
                html5audio.play()
            }
            return html5audio
        }
        else{
            return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
        }
    }
    var mouseClick=createsoundbite("sounds/cashSound.mp3")
</script>

HTML:

<form method='post' action='save.php'>
    <input type='submit' name='apply' value='Play' onclick='mouseClick.playclip()' />
</form>

I tried the setTimeout function but it didn’t work! Any suggestions?

Answer 1

Try to return false in playClip function. This may cause, the submit action will not be performed. You can wait for one second and call submit() on form element. You can also send form by AJAX.