browse by category or date

VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers, it is also the only professional solution that is freely available as Open Source Software under the terms of the GNU General Public License (GPL) version 2.

Between VMWare Workstation and VirtualBox, I prefer the later. Mainly because it’s free :D. It’s also sufficient to my need, which is pretty basic. I want to have a mini environment with a number of different database servers to test my application at home.

Anyway, the installation is really straight forward. Just by clicking Next buttons and Yes buttons, I think you should get your VirtualBox up and running.

Here are the screen captures for your viewing pleasure.

[nggallery id=4]

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant:

In a project that my team did recently, we build a web interface which receive inputs from a barcode scanner. Let’s focus to the textbox in which the scanning result will be entered.

When its content changed, textbox’s event handler will submit the value to backend process for validation. If valid, the textbox content will be cleared and a single beep sound will be played. If not, a triple beep sound will be played.

Apparently we had a quite challenge in implementing these single beep and triple beep sounds :D. So today I want to share what I have learned. When I googled for this topic, I found that there are at least three ways to do this. So I did made a simple HTML project, which you can download at the bottom of this article. I then tested each method using all major browsers (Firefox, Google Chrome, Internet Explorer 9, Opera and Safari).

The first two methods are utilizing plugins. IE will use Windows Media Player plugin, while the rest requires QuickTime plugin. Without these plugins, the first two methods won’t work.

1. Using EMBED tag.

<html>
   <head>
      <script type="text/javascript">
         function PlaySound(soundObj) {
           var sound = document.getElementById(soundObj);
           if (sound)
              sound.Play();
         }
      </script>
   </head>
   <body>
      <embed src="sounds/beep.wav" autostart="false" width="0" height="0" id="beep"
      enablejavascript="true">
      <embed src="sounds/beep3.wav" autostart="false" width="0" height="0" id="beep3"
      enablejavascript="true">
      <form>
         <input type="button" Value="Beep" onclick="PlaySound('beep')" />
         <input type="button" Value="3 Beeps" onclick="PlaySound('beep3')" />
      </form>
   </body>
</html>

Tested working on:

Surprisingly, it doesn’t work in current version Firefox (7.0.1). Once the page is loaded, Firefox simply barfed error message saying that the QuickTime plugin is crashed.

2. Using OBJECT tag.

<html>
   <head>
      <script type="text/javascript">
         function PlaySound(soundObj) {
           var sound = document.getElementById(soundObj);
           if (sound) {
               if (sound.object)
                  //IE needs this
                  sound.object.Play();
               else
                  sound.Play();
              }
         }
      </script>
   </head>
   <body>
      <object id="beep3" type="audio/wav" style="visibility:hidden;" data="sounds/beep3.wav">
         <param name="autostart" value="false" />
      </object>
      <object id="beep" type="audio/wav" style="visibility:hidden;" data="sounds/beep.wav">
         <param name="autostart" value="false" />
      </object>
      <form>
         <input type="button" Value="Beep" onclick="PlaySound('beep')" />
         <input type="button" Value="3 Beeps" onclick="PlaySound('beep3')" />
      </form>
   </body>
</html>

Tested working on:

This method doesn’t work on IE9. Surprisingly, I get random results when testing in IE9. Sometimes it hanged when it enters getElementById method. Some other times it gets “Access denied” error when accessing sound.object.Play().

3. Using AUDIO tag.

<html>
	<head>
		<script type="text/javascript">
         function PlaySound(soundObj) {
            var sound = document.getElementById(soundObj);
            if (sound)
               sound.play();
         }
      </script>
   </head>
   <body>
      <form>
         <button type="button" onclick="PlaySound('beep')">Beep</button>
         <button type="button" onclick="PlaySound('beep3')">Beep 3</button>
      </form>
      <audio src="sounds/beep3.wav"  id="beep3" />
      <audio src="sounds/beep.wav"  id="beep" />
   </body>
</html>

Audio tag seems to behave abnormally. When I put the audio tag above the form, nothing rendered in the page. Weird, right?
This method tested working on:

IE9 still not working. When I debug it, it able to return getElementById correctly. It’s just that the play() method does nothing.

Conclusion

Sadly, we are still unable to have one single solution that works in all major browsers. If we target various browsers, I suggest to use both AUDIO and EMBED tags. Then we select which element to play based on the browser type.

Btw, you can download the project files (html and wav files) HERE. Please test it yourself. I hope you get the same result as mine 😀 But if you don’t, please report your finding and let’s discuss it.

Alright, I hope it helps 😉 Cheers!

Reference:

  1. http://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep
  2. http://html5doctor.com/native-audio-in-the-browser/

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant:

If you notice, this blog is now have new Favourite Icon. OK I admit, I ripped off the from Google’s logo color-set. But as my friend pointed out, I could have ripped off the color-set from Windows too 🙂

Anyway, let’s get started with project. Here are the tools needed: Paint.NET, ColorPic (color picker), and Junior Icon Editor.

Since it is very easy, I won’t go through the details. I’ll just give you these steps. I hope you can figure it out on your own. 😉

  1. Create a new Image in Paint.NET. The canvas must be in square shape. I usually use 200×200 size.
  2. Use ColorPic to find out the color codes used on existing image.
  3. Once image complete, start Junior Icon Editor. Create all the possible size combination (16×16, 24×24, 32×32, 48×48, 64×64)
  4. On Paint.NET, resize the Image to 64×64, select All (Ctrl + A), Copy (Ctrl + C) the image
  5. On Junior Icon Editor, select the 64×64 part, Paste (Ctrl + V) the image
  6. Repeat above two steps for remaining sizes
  7. On Junior Icon Editor, save the image as favicon.ico
  8. Upload the favicon.ico to the root folder of your website / blog
  9. …..
  10. Profit?!??! 😀

Once you’ve done above steps, you can test it whether it works. Below is the picture of SODEVE’s favicon.ico in various browsers:

[nggallery id=2]

I hope it helps 😉 Cheers!

About Hardono

Howdy! I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 11 years.

Possibly relevant: