fukuroder · April 25, 2019 14:06
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset='utf-8'>
 <title>Local audio file player using Web Audio API (Haxe/JS)</title>
 <script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
 <script src='main.js'></script>
 </head>
 <body>
 Local audio file player using Web Audio API (Haxe/JS)
 <hr/>
 <input type='button' id='play' style='width:50px;' disabled='disabled' value='play' />
 volume:<input type='range' id='gain' min='0' max='100' value='50' autocomplete='off' />
 <input type='file' id='wave' accept='audio/*' autocomplete='off' />
 </body>
 </html>
diff --git a/Main.hx b/Main.hx
 package ;

 import js.Browser;
 import js.html.audio.*; // Web Audio API
 import js.html.File;
 import js.html.FileReader;
 import js.html.InputElement;
 import js.JQuery;
 import js.Lib;

 class Main {
    // Audio
    static var audio_context:AudioContext;
    static var buffer_source:AudioBufferSourceNode;
    static var gain_node:GainNode;
    static var decoded_buffer:AudioBuffer;

    // Elements
    static var button_play:JQuery;
    static var range_gain:JQuery;
    static var file_wave:JQuery;

    static function main():Void{
        new JQuery(Browser.window).ready(Main.window_loaded);
    }

    static function window_loaded(e:JqEvent):Void{
        // initialize
        Main.button_play = new JQuery('#play');
        Main.range_gain = new JQuery('#gain');
        Main.file_wave = new JQuery('#wave');

        Main.button_play.on('click', Main.play_click);
        Main.range_gain.on('input', Main.gain_input);
        Main.file_wave.on('change', Main.wave_change);

        // get AudioContext
        Main.audio_context = new AudioContext();

        Main.buffer_source = null;
        Main.gain_node = null;
        Main.decoded_buffer = null;
    }

    static function wave_change(e:JqEvent):Void{
        // disable play button
        Main.button_play.attr('disabled', 'disabled');

        var file_selector:InputElement = cast(Main.file_wave[0], InputElement);
        if (file_selector.files.length == 0) return;
        var audio_file:File = file_selector.files[0];

        if (audio_file.type != 'audio/wav'
         && audio_file.type != 'audio/ogg'
         && audio_file.type != 'video/ogg'){
            // wav or ogg only!
            Lib.alert('Please select wav/ogg file.');
            file_selector.value = '';
            return;
        }

        // disable file selector
        Main.file_wave.attr('disabled', 'disabled');

        // read local wave file
        var reader:FileReader = new FileReader();
        reader.onload = Main.load_finished;
        reader.readAsArrayBuffer(audio_file);
    }

    static function load_finished(e:Dynamic):Void{
        // decode
        Main.audio_context.decodeAudioData(e.target.result, Main.decode_finished);
    }

    static function decode_finished(buffer:AudioBuffer):Bool{
        // set decoded buffer
        Main.decoded_buffer = buffer;

        // enable play button and file selector
        Main.button_play.removeAttr('disabled');
        Main.file_wave.removeAttr('disabled');

        return true;
    }

    static function gain_input(e:JqEvent):Void{
        if (Main.gain_node != null) {
            // update gain
            Main.gain_node.gain.value = Std.parseFloat( Main.range_gain.val() )*0.01;
        }
    }

    static function play_click(e:JqEvent):Void{
        if(Main.button_play.val() == 'stop'){
            // play -> stop

            // change button caption
            Main.button_play.val('play');

            // enable file selector
            Main.file_wave.removeAttr('disabled');

            // stop
            Main.buffer_source.stop(0);
        }
        else{
            // stop -> play

            // change button caption
            Main.button_play.val('stop');

            // disable file selector
            Main.file_wave.attr('disabled', 'disabled');

            // generate source
            Main.buffer_source = Main.audio_context.createBufferSource();
            Main.buffer_source.buffer = Main.decoded_buffer;

            // generate gain node
            Main.gain_node = Main.audio_context.createGain();
            Main.gain_node.gain.value = Std.parseFloat(Main.range_gain.val())*0.01;

            // connect (source->gain->destination)
            Main.buffer_source.connect(Main.gain_node, 0, 0);
            Main.gain_node.connect(Main.audio_context.destination, 0, 0);

            // play
            Main.buffer_source.start(0);
        }
    }
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>Local audio file player using Web Audio API (Haxe/JS)</title>
	<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
	<script src='main.js'></script>
	</head>
	<body>
	Local audio file player using Web Audio API (Haxe/JS)
	<hr/>
	<input type='button' id='play' style='width:50px;' disabled='disabled' value='play' />
	volume:<input type='range' id='gain' min='0' max='100' value='50' autocomplete='off' />
	<input type='file' id='wave' accept='audio/*' autocomplete='off' />
	</body>
	</html>
	package ;

	import js.Browser;
	import js.html.audio.*; // Web Audio API
	import js.html.File;
	import js.html.FileReader;
	import js.html.InputElement;
	import js.JQuery;
	import js.Lib;

	class Main {
	// Audio
	static var audio_context:AudioContext;
	static var buffer_source:AudioBufferSourceNode;
	static var gain_node:GainNode;
	static var decoded_buffer:AudioBuffer;

	// Elements
	static var button_play:JQuery;
	static var range_gain:JQuery;
	static var file_wave:JQuery;

	static function main():Void{
	new JQuery(Browser.window).ready(Main.window_loaded);
	}

	static function window_loaded(e:JqEvent):Void{
	// initialize
	Main.button_play = new JQuery('#play');
	Main.range_gain = new JQuery('#gain');
	Main.file_wave = new JQuery('#wave');

	Main.button_play.on('click', Main.play_click);
	Main.range_gain.on('input', Main.gain_input);
	Main.file_wave.on('change', Main.wave_change);

	// get AudioContext
	Main.audio_context = new AudioContext();

	Main.buffer_source = null;
	Main.gain_node = null;
	Main.decoded_buffer = null;
	}

	static function wave_change(e:JqEvent):Void{
	// disable play button
	Main.button_play.attr('disabled', 'disabled');

	var file_selector:InputElement = cast(Main.file_wave[0], InputElement);
	if (file_selector.files.length == 0) return;
	var audio_file:File = file_selector.files[0];

	if (audio_file.type != 'audio/wav'
	&& audio_file.type != 'audio/ogg'
	&& audio_file.type != 'video/ogg'){
	// wav or ogg only!
	Lib.alert('Please select wav/ogg file.');
	file_selector.value = '';
	return;
	}

	// disable file selector
	Main.file_wave.attr('disabled', 'disabled');

	// read local wave file
	var reader:FileReader = new FileReader();
	reader.onload = Main.load_finished;
	reader.readAsArrayBuffer(audio_file);
	}

	static function load_finished(e:Dynamic):Void{
	// decode
	Main.audio_context.decodeAudioData(e.target.result, Main.decode_finished);
	}

	static function decode_finished(buffer:AudioBuffer):Bool{
	// set decoded buffer
	Main.decoded_buffer = buffer;

	// enable play button and file selector
	Main.button_play.removeAttr('disabled');
	Main.file_wave.removeAttr('disabled');

	return true;
	}

	static function gain_input(e:JqEvent):Void{
	if (Main.gain_node != null) {
	// update gain
	Main.gain_node.gain.value = Std.parseFloat( Main.range_gain.val() )*0.01;
	}
	}

	static function play_click(e:JqEvent):Void{
	if(Main.button_play.val() == 'stop'){
	// play -> stop

	// change button caption
	Main.button_play.val('play');

	// enable file selector
	Main.file_wave.removeAttr('disabled');

	// stop
	Main.buffer_source.stop(0);
	}
	else{
	// stop -> play

	// change button caption
	Main.button_play.val('stop');

	// disable file selector
	Main.file_wave.attr('disabled', 'disabled');

	// generate source
	Main.buffer_source = Main.audio_context.createBufferSource();
	Main.buffer_source.buffer = Main.decoded_buffer;

	// generate gain node
	Main.gain_node = Main.audio_context.createGain();
	Main.gain_node.gain.value = Std.parseFloat(Main.range_gain.val())*0.01;

	// connect (source->gain->destination)
	Main.buffer_source.connect(Main.gain_node, 0, 0);
	Main.gain_node.connect(Main.audio_context.destination, 0, 0);

	// play
	Main.buffer_source.start(0);
	}
	}
	}