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

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

感谢提供的答案，音频元素现在实际上响应了 slider 事件!..在我自己的环境中(不是 Fidle)音频元素播放的声音不受它的影响。我可以看到它正在响应。即使当我将它设置为音频元素本身的“静音”时，声音也会大声播放。不应该吗？

编辑2*我现在应该很惭愧!!!我听到我隐藏的浏览器的声音，并向那个浏览器发送测试消息。 :-)现在可以了!

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