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;