HTML5/jQuery: Отрегулируйте громкость звука на iPad

У меня проблема с настройкой громкости звука на iPad.HTML5/jQuery: Отрегулируйте громкость звука на iPad

Я закодировал простой пример, который работает во всех браузерах (которые поддерживают аудио HTML5), но не на iPad (у меня есть iPad 4 с новейшей iOS (7.0.4)).

Вы можете найти пример здесь: http://amplifon.netinvasion.ch

На этом сайте вы найдете три квадрата, которые делают короткий звуковой сигнал, если вы нажмете/потрогать на нем. С правой стороны расположен ползунок для регулировки громкости.

источник

2013-12-19 Phoebus Ryan

Предполагаю, что это связано с http://stackoverflow.com/questions/8048873/audio-not-playing-in-ipad – South

Нет. Звуковая игра на моем iPad. Проблема - это объем, а не автозапуск. –

Вот простой код jQuery, HTML, CSS для регулировки громкости, вы также можете добавить в CSS стиль, если хотите.

JQuery UI

<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/jquery-ui-1.8.21.custom.min.js"></script> 


HTML 
    <section> 
    <span class="tooltip"></span> 
    <div id="slider"></div> 
    <span class="volume"></span> 
    </section>

Регулировка громкости

$(function() { 

    var slider = $('#slider'), 
     tooltip = $('.tooltip'); 

    tooltip.hide(); 

    slider.slider({ 
     range: "min", 
     min: 1, 
     value: 35, 

     start: function(event,ui) { 
      tooltip.fadeIn('fast'); 
     }, 

     slide: function(event, ui) { 

      var value = slider.slider('value'), 
       volume = $('.volume'); 

      tooltip.css('left', value).text(ui.value); 

      if(value <= 5) { 
       volume.css('background-position', '0 0'); 
      } 
      else if (value <= 25) { 
       volume.css('background-position', '0 -25px'); 
      } 
      else if (value <= 75) { 
       volume.css('background-position', '0 -50px'); 
      } 
      else { 
       volume.css('background-position', '0 -75px'); 
      }; 

     }, 

     stop: function(event,ui) { 
      tooltip.fadeOut('fast'); 
     }, 
     }); 

    }); 


CSS 
    .ui-slider-handle { 
    position: absolute; 
    z-index: 2; 
    width: 25px; 
    height: 25px; 
    cursor: pointer; 
    background: url('../images/handle.png') no-repeat 50% 50%; 
    font-weight: bold; 
    color: #1C94C4; 
    outline: none; 
    top: -7px; 
    margin-left: -12px; 
    }

источник

2013-12-19 16:35:16

Спасибо за ваш ответ, но это не главное. Перемещение ползунка работает с входом [type = range], но громкость звука всегда одинакова. В не мобильных браузерах можно настроить громкость. –

Кажется, в настоящее время, и, к сожалению, что Apple, просто не позволяет разработчикам изменять volume установку HTML5 <audio> элементы прошивкой:

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10

Регулятор громкости в JavaScript

На рабочем столе, вы можете установить и прочитать volume свойство элемента <audio> или <video>. Это позволяет вам установить громкость звука элемента относительно текущего уровня громкости компьютера. Значение 1 воспроизводит звук на нормальном уровне. Значение 0 отключает звук. Значения между 0 и 1 ослабляют звук.

На устройствах iOS уровень звука всегда находится под физическим контролем пользователя. Свойство volume не настраивается в JavaScript. Чтение свойства volume всегда возвращает 1.

источник

2014-07-16 02:40:21 jtheletter

HTML5/jQuery: Отрегулируйте громкость звука на iPad

ответ

Смежные вопросы