Skip to content

Instantly share code, notes, and snippets.

@fukuroder
Last active April 25, 2019 14:06
Show Gist options
  • Save fukuroder/9981854 to your computer and use it in GitHub Desktop.
Save fukuroder/9981854 to your computer and use it in GitHub Desktop.
Local audio file player using Web Audio API (Haxe/JS) >>> http://fukuroder.sakura.ne.jp/gist/9981854
<!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);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment