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

Question

I have this simple tiny .mp3 that has to be played on new message. It plays well but i can't seam to control the volumelevel of it. I've this Jfidle http://jsfiddle.net/Ls9ef0zo/14/ prepared with a visual audio element. Ofcourse i don't want it to be visible in the real environment.

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

edit Not sure where to update the question as partialy answered so i'll do it here?

Thanks to the anwers provided the audio-element actually responds now to the slider-event however!..In my own environment (Not Fidle) The sound played by the audio-element is not affected by it. I can see it is responding. Even when i set it to 'Mute' on the audio-element itself the sound gets played out loud. Isn't that ought?

edit2* I should be very ashamed now!!! I was hearing the sound of a browser i'd hidden and was sending test messages to that one. :-) It's ok now!

Answer 1

Update:

Your code is fine. You need to define the outputUpdate() function before referring it in volumeslider. You simply need to tweak jsfiddle to have "no wrap in body".

 <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)"/>    

Here's the plunkr

Answer 2

You function output update is not used now.

try something like this.

 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;