fukuroder/local_wave_file_streaming_test.html

## local_wave_file_streaming_test.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>local wave file streaming test</title>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
$(function(){

    // HTML5 audio
    var audio_element = new Audio();

    $('#play')
    .attr({disabled:'disabled', value:'play'})
    .css({width:'100px'})
    .click(function(){
        if($(this).val() == 'stop'){
            //--------------
            // play -> stop
            //--------------

            // change button caption
            $(this).val('play');

            // enable file selector
            $('#wave').removeAttr('disabled');

            // stop
            audio_element.pause();
            audio_element.currentTime = 0;
        }
        else{
            //--------------
            // stop -> play
            //--------------

            // change button caption
            $(this).val('stop');

            // disable file selector
            $('#wave').attr({disabled:'disabled'})

            // play
            audio_element.load();
            audio_element.play();
        }
    });

    $('#gain')
    .attr({min:0, max:100, value:50})
    .change(function(){
        // update gain
        if(gainNode) gainNode.gain.value = $(this).val()*0.01;
    });

    $('#wave')
    .attr({accept:'audio/*'})
    .change(function(file_evt){
        if(file_evt.target.files.length == 0)
        {
            $('#play').attr({disabled:'disabled'})
            return;
        }

        audio_element.src = URL.createObjectURL(file_evt.target.files[0]);
        $('#play').removeAttr('disabled');

    });

    // get AudioContext
    var context = new AudioContext();

    // generate media element node
    var audioNode = context.createMediaElementSource(audio_element);

    // generate gain node
    var gainNode = context.createGain();
    gainNode.gain.value = $('#gain').val()*0.01;

    // connect (media element->gain->destination)
    audioNode.connect(gainNode);
    gainNode.connect(context.destination);
});
</script>
</head>
<body>
local wave file streaming test using HTML5 audio + Web Audio API
<hr/>
<input type='button' id='play' autocomplete='off' />
volume:<input type='number' id='gain' autocomplete='off' />
<input type='file' id='wave' autocomplete='off' />
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>local wave file streaming test</title>
	<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
	<script>
	$(function(){

	// HTML5 audio
	var audio_element = new Audio();

	$('#play')
	.attr({disabled:'disabled', value:'play'})
	.css({width:'100px'})
	.click(function(){
	if($(this).val() == 'stop'){
	//--------------
	// play -> stop
	//--------------

	// change button caption
	$(this).val('play');

	// enable file selector
	$('#wave').removeAttr('disabled');

	// stop
	audio_element.pause();
	audio_element.currentTime = 0;
	}
	else{
	//--------------
	// stop -> play
	//--------------

	// change button caption
	$(this).val('stop');

	// disable file selector
	$('#wave').attr({disabled:'disabled'})

	// play
	audio_element.load();
	audio_element.play();
	}
	});

	$('#gain')
	.attr({min:0, max:100, value:50})
	.change(function(){
	// update gain
	if(gainNode) gainNode.gain.value = $(this).val()*0.01;
	});

	$('#wave')
	.attr({accept:'audio/*'})
	.change(function(file_evt){
	if(file_evt.target.files.length == 0)
	{
	$('#play').attr({disabled:'disabled'})
	return;
	}

	audio_element.src = URL.createObjectURL(file_evt.target.files[0]);
	$('#play').removeAttr('disabled');

	});

	// get AudioContext
	var context = new AudioContext();

	// generate media element node
	var audioNode = context.createMediaElementSource(audio_element);

	// generate gain node
	var gainNode = context.createGain();
	gainNode.gain.value = $('#gain').val()*0.01;

	// connect (media element->gain->destination)
	audioNode.connect(gainNode);
	gainNode.connect(context.destination);
	});
	</script>
	</head>
	<body>
	local wave file streaming test using HTML5 audio + Web Audio API
	<hr/>
	<input type='button' id='play' autocomplete='off' />
	volume:<input type='number' id='gain' autocomplete='off' />
	<input type='file' id='wave' autocomplete='off' />
	</body>
	</html>