带有javascript的html5音频设置音量无效

我有一个简单的微型mp3，它必须在新消息中播放。它打得很好，但我无法控制它的音量。 我准备了一个带有视听元素的Jfidle。当然，我不希望它在真实环境中可见

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

var newmsgsound=document.createElement（'audio'）；
newmsgsound.setAttribute（'src'，
http://chat.transonly.nl/sounds/sound_1.mp3');
setAttribute（'id'，'newmsgsound'）；
setAttribute（'controls'，'controls'）；
body.appendChild（新声）；
函数输出更新（vol）{
var audiolevel=document.getElementById（'newmsgsound'）；
音量=音量；
}

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

多亏了anwers提供的音频元素，现在才真正响应滑块事件！。。在我自己的环境中（不是小提琴） 音频元素播放的声音不受其影响。我可以看到它正在响应。即使我在音频元素本身上将其设置为“静音”，声音也会被大声播放。 这不是应该的吗

edit2* 我现在应该很惭愧！！！ 我听到一个隐藏的浏览器的声音，正在向那个浏览器发送测试消息。：-）

---

现在没事了

现在不使用函数输出更新

试试这样的

 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;

更新：

你的代码很好。在volumeslider中引用outputUpdate（）函数之前，需要先定义它。 您只需调整JSFIDLE，使其“在主体中没有包装”

var newmsgsound=document.createElement（'audio'）；
newmsgsound.setAttribute（'src'，'http://chat.transonly.nl/sounds/sound_1.mp3');
setAttribute（'id'，'newmsgsound'）；
setAttribute（'controls'，'controls'）；
document.body.appendChild（newmsgsound）；
函数输出更新（vol）{
var audiolevel=document.getElementById（'newmsgsound'）；
音量=音量；
}   

---

下面是一个

尝试将事件侦听器添加到与函数定义相同的位置。如果将JSFIDLE设置为“no wrap in body”，它将起作用：确实起作用了。这是Fidle的典型设置？默认值是“onload”，它将代码包装到onload事件中，使变量的作用域限定。您在内联HTML中分配函数调用的方式有问题，OutputUpdate函数的作用域也有问题，因此它没有为HTML定义。Personnaly我避免内联定义事件处理程序。另外，一种解决方案可能是将函数声明为

window.outputUpdate=function（vol）{…

Yes（内联html）+以及如何将其更新为输入的默认值以外的值？刚才看到了您的评论。显然，JSFIDLE显示了

未捕获的引用错误：控制台上未定义outputUpdate

，但当我将代码复制粘贴到plunkr上时，它工作得很好。感谢您指出。更新答案。嗯，脚本实际上驻留在.js位于html所在页面的最前端。奇怪的是（即使音频元素可见并响应滑块），mp3也以相同的音量播放。即使我在音频元素上将其设置为静音，声音也会在新消息中播放。。。。。

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