Question

我有这个简单的小.mp3必须在新消息上播放。它运行良好，但我无法接缝来控制它的音量。我已经用视觉音频元素准备了这个Jfidle http://jsfiddle.net/Ls9ef0zo/14/。当然，我不希望它在真实环境中可见。

 <input id="volumeslider" type="range" min="0" max="1" step="0.1" value="0.5"
  oninput="outputUpdate(value)"/>                                                       


  var newmsgsound = document.createElement('audio');
  newmsgsound.setAttribute('src',
  http://chat.transonly.nl/sounds/sound_1.mp3');
  newmsgsound.setAttribute('id', 'newmsgsound');
  newmsgsound.setAttribute('controls', 'controls');
  body.appendChild(newmsgsound);

  function outputUpdate(vol) {
  var audiolevel = document.getElementById('newmsgsound');
  audiolevel.volume=vol;
  }

修改不确定在哪里更新问题，因为我会在这里做到这一点？

感谢提供的anwers，音频元素现在实际上响应了滑块事件！..在我自己的环境中（不是Fidle）音频元素播放的声音不受其影响。我可以看到它正在响应。即使我在音频元素本身上将其设置为“静音”，声音也会大声播放。不是吗？

EDIT2 * 我现在应该感到很惭愧!!! 我听到了我隐藏的浏览器的声音，并正在向那个发送测试消息。 :-) 现在好了！

Answer 1

更新

你的代码很好。 ~~您需要在volumelider中引用它之前定义outputUpdate（）函数。~~ 你只需要调整jsfiddle就可以“没有身体包裹”。

 <script>
     var newmsgsound = document.createElement('audio');
     newmsgsound.setAttribute('src', 'http://chat.transonly.nl/sounds/sound_1.mp3');
     newmsgsound.setAttribute('id', 'newmsgsound');
     newmsgsound.setAttribute('controls', 'controls');
     document.body.appendChild(newmsgsound);

     function outputUpdate(vol) {      
        var audiolevel = document.getElementById('newmsgsound');
        audiolevel.volume=vol;
    }   
    </script>

    <input id="volumeslider" type="range" min="0" max="1" step="0.1" oninput="outputUpdate(value)"/>

这是plunkr

Answer 2

现在不使用您的功能输出更新。

尝试这样的事情。

paintComponent

html5 audio使用javascript设置音量无效

2 个答案: