Menu
Sites
Language
Web Audio API delay for local files

Hi,

I'm using Web Audio API with this code:

var Player = function () {
	this.audioContext = new webkitAudioContext();
}

Player.prototype.play = function (url) {
	var request = new XMLHttpRequest();
	request.open("GET", url, true);
	request.responseType = "arraybuffer";
	var audioContext = this.audioContext;
	request.onload = function () {
		var soundSource = audioContext.createBufferSource();
		audioContext.decodeAudioData(request.response, function(buffer) {
			soundSource.buffer = buffer;
		}, null);
		soundSource.connect(audioContext.destination);
		soundSource.noteOn(0);
	};
	request.send();
}

But I have a long delay before the playback of local files on Samsung RD-PQ with

var player = new Player();
player.play('file:///path-to-file.mp3');

How can I avoid it?

Edited on 18 03, 2014
List

Responses

14 Replies
Kirill Chuvilin
For the completeness. Using the <audio> tag occurs without delay. But is stops when the app is minimized to the background.
Lakshmi Grandhi
Hi, I guess it is a webit bug, i raised a bug https://bugs.tizen.org/jira/browse/TWEB-148. Kindly follow it for more updates.
Kirill Chuvilin
Thank you. But I'm still not sure that it is a bug. Perhaps this is because the files are loaded via XMLHttpRequest. Is it possible to do it in the other way for local files?
Raghavendra Reddy Shiva
Verified the playback behavior using below ways, 1) Using FileReader() object 2) Using XMLHttpRequest() object In both the cases, the audio playback has a delay before it starts playing. The reason for this delay is due to the audio file “decoding time”. You can see the delay in decoding the buffer source in logs from the time it started to decode. So it the WebKit, which is taking so long to decode the audio file. Audio file need to be decoded well before the playback to avoid the delay. When trying below code, you need to wait (after selecting the local file from device in FileReader case) till you see the "Decoded data ready" message in console logs. After this message the playback is normal. HTML code:

Web Audio API demo

 JavaScript: The below two function call (depending on which method) should go in the page initialization. loadSoundFile('divide.mp3'); // Uses XMLHttpRequest() initSource(); // Uses FileReader() // the implementation var context = new window.webkitAudioContext(); var source = null; var audioBuffer = null; function stopSound() { console.log('stopSound called'); if (source) { source.noteOff(0); } } function playSound() { if (audioBuffer) { console.log('Creating source buffer'); source = context.createBufferSource(); source.buffer = audioBuffer; //source.loop = false; console.log('Connecting source to destination'); source.connect(context.destination); source.noteOn(0); console.log('Playback started'); } else{ console.log('Audio file not decoded yet'); } } function decodeAudioFile(arrayBuffer) { console.log('Decoding array buffer..'); context.decodeAudioData(arrayBuffer, function(buffer) { audioBuffer= buffer; console.log('Decoded data ready'); }, function(e) { console.log('Error decoding file', e); }); } function initSource() { console.log('initSource called'); // User selects file, read it as an ArrayBuffer and pass to the API. var fileInput = document.querySelector('input[type="file"]'); fileInput.addEventListener('change', function(e) { var reader = new FileReader(); reader.onload = function(e) { decodeAudioFile(this.result); }; reader.readAsArrayBuffer(this.files[0]); }, false); } function loadSoundFile(url) { console.log('loadSoundFile'); var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { decodeAudioFile(this.response); // this.response is an ArrayBuffer. }; xhr.send(); }
Kirill Chuvilin
Thank you for the test! But if there is a list of files to be played, it is impossible to preload them all and it is not great to wait for a few seconds after the file is selected. Is there any other way to play sound in the background with HTML5 and JavaScript? I have added the line 
<tizen:setting background-support="enable"/>
to the config.xml file, but is doesn't help with the use of the <audio> tag or objects of the <Audio> class in the background.
Kirill Chuvilin
So, the fast variant is 
var Player = function () {
    this.audio = new Audio();
}

Player.prototype.play = function (url) {
    this.audio.src = url;
    this.audio.play();
}
But it doens work in the background.
Raghavendra Reddy Shiva
Yeah for multiple files, this wouldn't be a good choice. Though not sure of any other alternatives from web. But there's another way (if feasible in your case), you can use the existing native media player controls in web application (using hybrid apps). For more details, refer below link. https://developer.tizen.org/documentation/articles/accessing-native-media-playback-controls-web-applications You can download the sample application for reference.
Kirill Chuvilin
Thank you. I have studied this article yesterday. To be honest, I do not really want to use it because there is a desire to show the possibilities of HTML5 applications.
Richa Basak
Hi Kirill I want to build an audio player too for my college project however i have no idea where to start. Can you help me out please. Also can i build the player as a native app for tizen or should i opt for web app. kindly guide me. thank you.
John Ixion
Hi Richa, some ideas: http://codegeekz.com/best-html5-video-players-and-tools-for-developers/
Richa Basak
Hi Oliver thank you for the link!
Kirill Chuvilin
Hi, the UI could be easily implemented with HTML5 and media files API. Actually I have it already done. The only problem is with playback. But you can build the whole app as native app. The built-in music player is an example.
Richa Basak
Hi kirill Thanks for your prompt reply. I have one more doubt: if i build a audio player in html5 i.e as a web app will the application be able to read the the music files from the phone memory / Memory card or would it only be able to play music files through the internet.
Kirill Chuvilin
Yes, It is possible and easy to read local files. Please see the title of this topic and the API references: https://developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.device.apireference%2Ftizen%2Fcontent.html https://developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.device.apireference%2Ftizen%2Ffilesystem.html