代码之家 › 专栏 › 技术社区 › Una Persona Normal

在滑块上选择特定值时播放声音

slider audio html javascript

Una Persona Normal · 技术社区 · 3 年前

我试着制作一个简单的滑块,当在上面选择某个值时(在本例中为76),表示“继续”的按钮会播放某个声音,而不是重定向,但我似乎无法使其工作,你们能帮我解决这个问题吗?以下是片段。

           <div id="Slider">
        <span id="rangeValue">0</span>
        <Input class="range" type="range" name "" value="0" min="0" max="100" onChange="rangeSlide(this.value)" onmousemove="rangeSlide(this.value)"></Input>
    </div>
    <script type="text/javascript">
        function rangeSlide(value) {
            document.getElementById('rangeValue').innerHTML = value;
        }
    </script>
<button class="btn-1" id="i22w3" onclick="play()">Continue</button>
<audio id="audio" src="https://www2.cs.uic.edu/~i101/SoundFiles/BabyElephantWalk60.wav"></audio>
<script type="text/javascript">

var audio = document.getElementById("audio");
      function play() {
        if ('rangeValue' = 76) {
   audio.play();
} else {
   window.location.replace("https://example.com/");
}

提前谢谢!

2 回复 | 直到 3 年前

Brother58697 3 年前

修复了代码中的一些问题,其中一些可能是因为忘记复制最下面的几行。

<div id="Slider">
        <span id="rangeValue">0</span>
        <Input class="range" type="range" name "" value="0" min="0" max="100" onChange="rangeSlide(this.value)" onmousemove="rangeSlide(this.value)"></Input>
    </div>
    <script type="text/javascript">
        function rangeSlide(value) {
          document.getElementById('rangeValue').innerHTML = value;
        }
    </script>
<button class="btn-1" id="i22w3" onclick="play()">Continue</button>

<script>
 function play() {
   const rangeValue = document.getElementById('rangeValue').textContent;
   if (rangeValue === "76") {
     console.log('play sound')
   } else {
     console.log('replace')
   }
 }
</script>

测试它 here

我所做的:

rangeValue 在里面 play() 因为现在它只是一个字符串: 'rangeValue'
= 到 ===

Buggies 3 年前

JS中的平等 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality

“rangeValue”应该是一个变量->来自滑块的值

function play() {
  if ('rangeValue' === 76) { // missing `===`
     audio.play();
  } else {
     window.location.replace("https://example.com/");
  }
}

推荐文章