2013-03-22 54 views
3

我注意到Safari中的音頻播放音量爲不是100%,即使我將分配的控件設置爲「1」。Safari中HTML5音量的問題

有沒有另外做到這一點,或者這可能是在腳本中的問題?

使用此控件(如下所示),音頻在Firefox中以100%播放。

更新:顯然,我使用的音量控制沒有在Safari(見下文)的認可,所以現在我正在尋找一種方法以100%的音量播放音頻,使用下面這個播放器,在蘋果瀏覽器。

根據Safari開發者庫,閱讀音量總是返回1,這正是我設置我的播放器的原因;但是,Safari的音量略低於其他瀏覽器。

問題可能出現在我的腳本中,還是僅僅是Safari的問題?

ALSO,我注意到,改變音量參數會減弱Safari中的音量,但1不等於100%。因此,它確實有一些效果,但仍然存在問題。

這裏是我的HTML:

<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="src/jquery.ubaplayer.js"></script> 
<script> 
jQuery(document).ready(function() { 
    jQuery.noConflict(); 
    jQuery(function(){ 
      jQuery("#ubaPlayer").ubaPlayer({ 
      codecs: [{name:"MP3", codec: 'audio/mpeg;'}] 
      }); 

    }); 
    jQuery('a[rel=vidbox]').click(function() { 

     if (jQuery("#ubaPlayer").ubaPlayer("playing") === true) { 
      jQuery("#ubaPlayer").ubaPlayer("pause"); 
      } 
     return false; 
    }); 
}) 
</script> 
</head> 

<body> 
<div id="ubaPlayer"></div> 
    <ul class="controls"> 
     <li><a class="audioButton" href="mp3/dontthinktwice.mp3"> 
     Don't Think Twice (Bob Dylan)</a></li> 
     <li><a class="audioButton" href="mp3/livingforthecity.mp3"> 
     Living for the City (Stevie Wonder)</a></li> 
    </ul> 
</body> 

音頻播放器的Javascript:

(function($) { 
var defaults = { 
    audioButtonClass: "audioButton", 
    autoPlay: null, 
    codecs: [{ 
     name: "OGG", 
     codec: 'audio/ogg; codecs="vorbis"' 
    }, { 
     name: "MP3", 
     codec: 'audio/mpeg' 
    }], 
    continuous: false, 
    extension: null, 
    flashAudioPlayerPath: "libs/swf/player.swf", 
    flashExtension: ".mp3", 
    flashObjectID: "audioPlayer", 
    loadingClass: "loading", 
    loop: false, 
    playerContainer: "player", 
    playingClass: "playing", 
    swfobjectPath: "libs/swfobject/swfobject.js", 
    volume: 1 
}, 
    currentTrack, isPlaying = false, 
    isFlash = false, 
    audio, $buttons, $tgt, $el, playTrack, resumeTrack, pauseTrack, methods = { 
     play: function(element) { 
      $tgt = element; 
      currentTrack = _methods.getFileNameWithoutExtension($tgt.attr("href")); 
      isPlaying = true; 
      $tgt.addClass(defaults.loadingClass); 
      $buttons.removeClass(defaults.playingClass); 

      if (isFlash) { 
       if (audio) { 
        _methods.removeListeners(window); 
       } 
       audio = document.getElementById(defaults.flashObjectID); 
       _methods.addListeners(window); 
       audio.playFlash(currentTrack + defaults.extension); 
      } else { 
       if (audio) { 
        audio.pause(); 
        _methods.removeListeners(audio); 
       } 
       audio = new Audio(""); 
       _methods.addListeners(audio); 
       audio.id = "audio"; 
       audio.loop = defaults.loop ? "loop" : ""; 
       audio.volume = defaults.volume; 
       audio.src = currentTrack + defaults.extension; 
       audio.play(); 
      } 
     }, 

     pause: function() { 
      if (isFlash) { 
       audio.pauseFlash(); 
      } else { 
       audio.pause(); 
      } 

      $tgt.removeClass(defaults.playingClass); 
      isPlaying = false; 
     }, 

     resume: function() { 
      if (isFlash) { 
       audio.playFlash(); 
      } else { 
       audio.play(); 
      } 
      $tgt.addClass(defaults.playingClass); 
      isPlaying = true; 
     }, 

     playing: function() { 
      return isPlaying; 
     } 
    }, 

    _methods = { 
     init: function(options) { 
      var types; 

      //set defaults 
      $.extend(defaults, options); 
      $el = this; 

      //listen for clicks on the controls 
      $(".controls").bind("click", function(event) { 
       _methods.updateTrackState(event); 
       return false; 
      }); 
      $buttons = $("." + defaults.audioButtonClass); 

      types = defaults.codecs; 
      for (var i = 0, ilen = types.length; i < ilen; i++) { 
       var type = types[i]; 
       if (_methods.canPlay(type)) { 
        defaults.extension = [".", type.name.toLowerCase()].join(""); 
        break; 
       } 
      } 

      if (!defaults.extension || isFlash) { 
       isFlash = true; 
       defaults.extension = defaults.flashExtension; 
      } 

      if (isFlash) { 
       $el.html("<div id='" + defaults.playerContainer + "'/>"); 
       $.getScript(defaults.swfobjectPath, function() { 
        swfobject.embedSWF(defaults.flashAudioPlayerPath, defaults.playerContainer, "0", "0", "9.0.0", "swf/expressInstall.swf", false, false, { 
         id: defaults.flashObjectID 
        }, _methods.swfLoaded); 
       }); 
      } else { 
       if (defaults.autoPlay) { 
        methods.play(defaults.autoPlay); 
       } 
      } 
     }, 

     updateTrackState: function(evt) { 
      $tgt = $(evt.target); 
      if (!$tgt.hasClass("audioButton")) { 
       return; 
      } 
      if (!audio || (audio && currentTrack !== _methods.getFileNameWithoutExtension($tgt.attr("href")))) { 
       methods.play($tgt); 
      } else if (!isPlaying) { 
       methods.resume(); 
      } else { 
       methods.pause(); 
      } 
     }, 

     addListeners: function(elem) { 
      $(elem).bind({ 
       "canplay": _methods.onLoaded, 
       "error": _methods.onError, 
       "ended": _methods.onEnded 
      }); 
     }, 

     removeListeners: function(elem) { 
      $(elem).unbind({ 
       "canplay": _methods.onLoaded, 
       "error": _methods.onError, 
       "ended": _methods.onEnded 
      }); 
     }, 

     onLoaded: function() { 
      $buttons.removeClass(defaults.loadingClass); 
      $tgt.addClass(defaults.playingClass); 

      audio.play(); 
     }, 

     onError: function() { 
      $buttons.removeClass(defaults.loadingClass); 
      if (isFlash) { 
       _methods.removeListeners(window); 
      } else { 
       _methods.removeListeners(audio); 
      } 
     }, 

     onEnded: function() { 
      isPlaying = false; 
      $tgt.removeClass(defaults.playingClass); 
      currentTrack = ""; 
      if (isFlash) { 
       _methods.removeListeners(window); 
      } else { 
       _methods.removeListeners(audio); 
      } 

      if (defaults.continuous) { 
       var $next = $tgt.next().length ? $tgt.next() : $(defaults.audioButtonClass).eq(0); 
       methods.play($next); 
      } 

     }, 

     canPlay: function(type) { 
      if (!document.createElement("audio").canPlayType) { 
       return false; 
      } else { 
       return document.createElement("audio").canPlayType(type.codec).match(/maybe|probably/i) ? true : false; 
      } 
     }, 

     swfLoaded: function() { 
      if (defaults.autoPlay) { 
       setTimeout(function() { 
        methods.play(defaults.autoPlay); 
       }, 500); 
      } 
     }, 

     getFileNameWithoutExtension: function(fileName) { 
      //this function take a full file name and returns an extensionless file name 
      //ex. entering foo.mp3 returns foo 
      //ex. entering foo returns foo (no change) 
      var fileNamePieces = fileName.split('.'); 
      fileNamePieces.pop(); 
      return fileNamePieces.join("."); 
     } 
    }; 

$.fn.ubaPlayer = function(method) { 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === "object" || !method) { 
     return _methods.init.apply(this, arguments); 
    } else { 
     $.error("Method " + method + " does not exist on jquery.ubaPlayer"); 
    } 
};})(jQuery); 
+1

Safari使用WebKit引擎,Firefox使用Gecko引擎。他們都以不同的方式解釋JavaScript。 – ShuklaSannidhya 2013-03-22 04:37:22

+0

@Sann - 我注意到,改變音量參數會減弱Safari中的音量,但1不等於100%。因此,它確實有一些效果,但不是完全控制。 – pianoman 2013-03-22 04:52:36

+0

@Sann不,他們不。這顯然是錯誤的。不同的是支持某些功能和API。 – 2013-03-23 09:04:05

回答

1

你說的是移動Safari瀏覽器?在這種情況下,音量不能用Javascript設置。

對此有讀:http://www.ibm.com/developerworks/library/wa-ioshtml5/

如果你正在談論桌面Safari瀏覽器我的直覺是,它的瀏覽器,這裏有毛病,而不是你的代碼。

+0

不,這只是桌面版本。我理解移動版本的限制。 – pianoman 2013-07-22 03:40:26