Beep for web apps

Targets Web
1

I want to play a brief mp3 file after each of a fairly rapid sequence of button presses. I was using an mp3 but no matter how low I go on the bitrate and duration for the mp3 it slows down the button presses.

Any way to make the mp3 play asynchronously?

Any alternative that doesn’t require an mp3 (like Beep for Desktop apps)?

[Note: Another issue I have encountered is that the 64 kbps mp3 played via IE seems to get cut off at the end of the mp3 whereas Chrome does not do this. I don’t have a solution for this problem but if I can find an alternative to playing mp3 I don’t need to worry about it.]

2

I put this code in a constant on a page (kBeep):

[code]var beep = function() {

if (!(window.audioContext || window.webkitAudioContext)) {
    throw Error("Your browser does not support Audio Context.");
}

if (typeof finishedCallback != "function") {
    finishedCallback = function() {};
}

var ctx = new(window.audioContext || window.webkitAudioContext);
var osc = ctx.createOscillator();

osc.type = 0;

osc.connect(ctx.destination);
osc.noteOn(0);

setTimeout(function() {
    osc.noteOff(0);
    finishedCallback();
}, 300);

};

beep();[/code]

Then in the Action event handler of a button I call it:

 Me.ExecuteJavaScript(kBeep)

I have no idea if it works in IE, but it worked in Safari.

(Adapted from code in this Stack Overflow post).

3

That’s a great idea! I will give it a try.

4

Found this for playing around with different tones:

http://patorjk.com/experiments/tones/

5

I don’t think it works in IE. Webkit browsers only.

6

[quote=83956:@Loren Staplin]Found this for playing around with different tones:

http://patorjk.com/experiments/tones/[/quote]
Interesting…this doesn’t work for me in Chrome on Mac OS X 10.9, and neither does Paul’s. They only work in Safari. But they both work in Chrome on Windows.

???

7

I think I am going to try the recommendation further down on the page where he loads the beep data in a data URI. This seems to work fine in IE.

http://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep

I am not sure it will solve my problem but I will find out tomorrow.

8

Need a little help. Here’s what I put in a Beep method in a CustomWebPageSource control (I am not putting in the sound file data here…too long):

Dim s as string s="var snd = new Audio('data:audio/mp3;base64,<insert sound data here>');" s=s+"snd.play();" me.ExecuteJavaScript(s)

I used this site to convert the mp3 file to data: http://dataurl.net/#dataurlmaker

It works, but I am not sure it is better. Also, IE still clips the sound (or maybe it is playing it too fast? Not sure). I will try converting it to wav.

My question is this: Is there any way to just load the data for the sound file once instead of every time the Beep method is called? I tried putting the sound data in a BeepLoad method but then Beep says not defined.

[Note: The Xojo IDE does not display the line with the sound data correctly. There is a lot of white space but the data is actually there. I can copy and paste into Notepad and it is there. Is this worth filing a bug report? I can produce a file to demonstrate the problem.]

9

I see my mistake. I needed to use createElement(‘audio’). It works fine now loading base64 data separately and then just doing snd.play() only.

I made the beep a simple square wave .1 second long.

Unfortunately, I still think it is still too slow. It seems like it takes about half a second between when I press the button and the beep is presented. That may not seem like much but it really does slow the user down.

Anything else I can do to speed things up? If not, I’ll have to do without the beep.

10

Look there. Several methods to choose from :
http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

11

Cool solution but I am getting the following error : SyntaxError: Failed to construct ‘AudioContext’: number of hardware contexts reached maximum (6).

12

[quote=83966:@Ken Gish]I think I am going to try the recommendation further down on the page where he loads the beep data in a data URI. This seems to work fine in IE.

http://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep

I am not sure it will solve my problem but I will find out tomorrow.[/quote]

I was searching for a way to play two notification sounds. One for success and one for failure. This method Ken Gish described worked well for me. I used Paul Lefebvre’s suggestion for storing the JavaScript in a constant,

Public Const kBeep as String = function beep() { var snd = new Audio("data:audio/mp3;base64,REPLACE WITH ENCODED DATA"); snd.play(); } beep();
and then just execute it with

WebPageMain.ExecuteJavaScript(kBeep)

whenever I want the sound to play. The Page http://dataurl.net/#dataurlmaker Ken suggested converted the MP3 files I wanted to use without problems. It also seems that after the sound has played once it will replay much faster. I presume it gets cached.