an audio element

by fschwiet

HTML

<input type='text' id='message' value='bien o no'/>
<input type='text' id='language' value='es-ES'/>
<button id='play-message-in-language'>test</button>

<div id='consolelog'>
</div>

JavaScript

var instanceIndex = 0;
    
    function log(message) {
        console.log(message);
        var logMessage = new $('<p>' + message + '</p>');
        $('#consolelog').append(logMessage);
    }

        window.say = function(term, language, endHandler) {
       
        var thisInstanceIndex = ++instanceIndex;
        
	    log('saying ' + thisInstanceIndex);
            
        $("audio.created-by-say").remove();

	    var url = "http://haypagina.104.131.214.237.xip.io/speech?" + 
            "q=" + encodeURIComponent(term)+
	        "&tl=" + encodeURIComponent(language);

	    var audioElement = $("<audio class='created-by-say'></audio>")[0];
	    audioElement.src = url;

	    function onFinish() {
	        if (endHandler != null)
	        {
	            endHandler = null;
	            endHandler();
	        }
	    }
        
        var knownEvents = ['abort','canplay','canplaythrough','durationchange', 'emptied', 'enccrypted', 'ended', 'error', 'interruptbegin', 'interrupted', 'loadeddata', 'loadedmetadata', 'loadstart', 'mozaudioavailable', 'onencrypted', 'pause', 'play', 'playing','progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend','timeupdate','volumechange','waiting'];
        
        knownEvents.forEach(function(eventName) {
            audioElement.addEventListener(eventName, function() {
                log('#' + thisInstanceIndex + ', ' + eventName);
            });
        });

	    audioElement.addEventListener('ended', endHandler);
	    audioElement.addEventListener('error', endHandler);
	    audioElement.addEventListener('ended', endHandler);

	    $("body").append(audioElement);

	    audioElement.play();
	}
   
    $('#play-message-in-language').click(function(){
        log('trying to play');
        say($('#message').val(), $('#language').val(), function() {
            log('finished button playback');
        });
    });

$('#play-message-in-language').click();