How to use JavaScript to play a sound every X seconds?

T

TheStrangeWind2014-10-12 11:50:17

JavaScript

TheStrangeWind, 2014-10-12 11:50:17

The situation is this: It is
necessary that the sound be played every few seconds a certain number of times.
I tried to do this (and two more ways):
JavaScipt:

var audioPlayer = document.getElementById("player");
var audioPlayCount = parseInt(document.one.numberO.value);
var audioSeconds = parseInt(document.one.intervalO.value);

var start = function()
{
    audioPlayer.play();
};

var out = function()
{
    if(!audioPlayCount || !audioSeconds || audioSeconds < 5 )
    {
        alert("Введены некорректные данные");
        return;
    }

    for(var i = 0; i < audioPlayCount; i++)
    {
        setTimeout(start, 1000 * audioSeconds);
    }
};

and HTML:

<form name="one">
  Количество запусков: <br />
  <input type="text" name="numberO"><br />
  <br />
  Интервал между звуками (в секундах, не меньше 5-ти): <br />
  <input type="text" name="intervalO">
</form>	
<audio id="player" src="one.mp3"></audio>	
<div>	
    <button onclick="out();">Пуск</button>
    <button onclick="document.getElementById('player').pause()">||</button>
  <br>
  <br>
    <button onclick="document.getElementById('player').volume+=0.1"> +</button>
    <button onclick="document.getElementById('player').volume-=0.1"> -</button>
</div>

But it didn't work. Help a javascript newbie.
How can the task be completed?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

B

batchar, 2014-10-12
@TheStrangeWind

I myself am not strong in JS, but I made a working example:

<html>
  
  <body>
    <script type="text/javascript">
      var AudioClass = function(audio_player){
        var self = this;
        
        self.audioPlayer = document.getElementById(audio_player);

        self.audioPlayer.volume = 0.5;
        self.Play = function(){
          self.audioPlayer.play();
        }

        self.Volume = function(val){
          self.audioPlayer.volume += val;
        }

        self.Pause = function(){
          self.audioPlayer.pause();
        }

        self.playCount = 1;
        self.playInterval = 0;

        self.intervalId = -1;

        self.PlayCicle = function(){
          var _playInterval = parseInt(self.playInterval);
          var _playCount = parseInt(self.playCount);
          
          if(isNaN(_playCount))
            _playCount = 1;
          if(isNaN(_playInterval))
            _playInterval = 0;
          console.log(_playInterval, _playCount);
          if(self.intervalId != -1){
            clearInterval(self.intervalId);
          }

          self.Play();
          _playCount -= 1;

          if(_playCount == 0) return;

          self.intervalId = setInterval(function(){
            console.log(_playCount); 
            if(_playCount <= 0 ){
              clearInterval(self.intervalId);
              return;
            } 
            _playCount -= 1; 
            self.Play();
          }, _playInterval*1000);
        }

      }	
    </script>

    <form name="one">
      Количество запусков: <br />
      <input type="text" name="numberO" id="number0" ><br />
      <br />
      Интервал между звуками (в секундах, не меньше 5-ти): <br />
      <input type="text" id="interval0" name="intervalO" >
    </form>	
    <audio id="player" src="one.mp3"></audio>	
    <div>	
        <button onclick="play();">Пуск</button>
        <button onclick="pause();">||</button>
      <br>
      <br>
        <button onclick="volume_plus();"> +</button>
        <button onclick="volume_minus();"> -</button>
    </div>



    <script>
      var Audio = new AudioClass('player');
      

      function play(){
        Audio.playCount = document.getElementById('number0').value;
        Audio.playInterval = document.getElementById('interval0').value;

        Audio.PlayCicle();
      }

      function pause(){
        Audio.Pause();
      }

      function volume_plus(){
        Audio.Volume(0.1);
      }

      function volume_minus(){
        Audio.Volume(-0.1);
      }

    </script>
    

  </body>
</html>