html5音频使用javascript设置音量无效

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;
  }

编辑不确定在哪里更新问题作为部分回答所以我会在这里做？

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

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

Answer 1

更新：

你的代码没问题。 在volumeslider 中引用它之前，您需要定义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

现在不使用您的函数输出更新。

尝试这样的事情。

 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);
 var audiolevel = document.getElementById('newmsgsound');
 var value = document.getElementById('volumeslider').value;
 audiolevel.volume=value;