Search code examples
html5-audiosoundmanager2browser-feature-detection

soundmanager2: how to determine whether the volume attribute is changeable


I'm using the soundmanager2 library (http://www.schillmania.com/projects/soundmanager2) to provide crossbrowser audio support, which works great.
But IOS devices don't allow the HTML5 audio volume property to be set. So I'd like to detect whether it's possible to use this feature in order to change the appearance of my site (e.g. hiding the volume control).


Solution

  • If I change the volume property of a soundmanager2 sound object in ios-safari the soundmanager2 volume property changes and doesn't account for the fact, that the HTML5 audio object's volume property always stays 1.

    So my solution is the following:

    $(function(){
      soundManager.onready(function(){
        voltest = soundManager.createSound({
          id: "testid",
          url: some_valid_audio_url,
          autoLoad: false,
        });
        if (voltest.isHTML5) {
          var html5audio = new Audio();
          html5audio.volume = 0.34;
          if (html5audio.volume == 0.34) {
            $("html").addClass("volchange");  
          }
        } else {
          $("html").addClass("volchange");
        }
        voltest.destruct();
      });
    });
    

    I like my solution, and thought it might be useful to others...