If you ever used the native datepicker on iOS, you probably noticed the sound effect while the wheels are spinning. We tried to add the same effect to Mobiscroll by using the HTML5 audio element. At a first glance it seemed pretty straight forward, as all the modern browsers claim to support HTML5, but because of some restrictions (especially on mobile browsers), we were unable to implement it in a satisfactory way.

The audio element:

<audio preload="auto">
  <source src="scroll.mp3" controls></source>
  <source src="scroll.ogg" controls></source>
</audio>

First approach

Create one audio element and play the sound every time the wheel passes over a value.

var audio = $('audio', dw)[0];

setInterval(function () {
  // ....
  if (p != last) { // Play sound if position changed
    audio.play();
    last = p;
  }
  // ....
}, 100);

Result

• works fine on desktop browsers (tested on IE9, Chrome 23, Firefox 17)
• works pretty good on Google Nexus 7

Problems

• only one sound was played, even if more than one wheel was scrolled at once
• on iOS6 and Android 2.3 audio.play() had no effect, if the previous play was not finished
• preload is not possible on iOS and apparently on Chrome for Android, so on the first scroll after page load there was a lag of 1-2 seconds until the sound was played

Second approach

Create 10 audio elements and sequentially call the play method on them, to be able to play multiple sounds at once.

var audio = [];

for (i = 0; i < 10; i++) {
  audio.push($('audio', dw).clone()[0]);
}

var au = 0;

setInterval(function () {
  // ....
  if (p != last) { // Play sound if position changed
    audio[au++ % 10].play();
    last = p;
  }
  // ....
}, 100);

Result

• as expected, it works fine on desktop browsers
• surprisingly it kind of works on Kindle Fire’s Silk browser, but sometimes it needed a change of the device’s sound volume to make it work (that’s weird)

Problems

• still no preload of course
• no support for multiple sound channels on iOS and Chrome on Android 4.2, at least when the play method is called from javascript
• very laggy on Android 2.3

Anyway, here’s a video of the behavior on the Nexus 7 tablet