JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<div>
<label><input type="text" name="numberO" value="3"> Количество запусков</label>
</div>
<div>
<label><input type="text" name="intervalO" value="3"> Интервал между звуками (в секундах, не меньше 2-х)</label>
</div>
<div>
<button type="button" data-type="start">►</button>
<button type="button" data-type="stop">■</button>
<button type="button" data-type="pause">||</button>
<button type="button" data-type="volume" data-value=".1">+</button>
<button type="button" data-type="volume" data-value="-.1">–</button>
</div>
</form>
<audio id="player" src="http://zvuki-mp3.com/uploads/mp3/e6b8de465f0b15c185f29a199aa8c992.mp3"></audio>
CSS
div{
margin:0 0 10px;
}
JavaScript
$(function () {
var audioPlayer = $('#player').get(0),
audioPlayCount,
audioSeconds,
queue = [];
$(document).on('click', 'button[data-type]', function () {
var $button = $(this),
type = $button.data('type');
switch (type) {
case 'start':
audioPlayCount = parseInt(this.form.numberO.value);
audioSeconds = parseInt(this.form.intervalO.value);
if(!audioPlayCount || !audioSeconds || audioSeconds < 2) {
return error();
} else {
start();
}
break;
case 'stop':
stop();
break;
case 'pause':
audioPlayer.pause();
break;
case 'volume':
audioPlayer.volume += parseFloat($button.data('value'));
break;
}
});
function play () {
audioPlayer.play();
}
function stop () {
$.each($(queue), function () {
clearTimeout(this);
});
queue = [];
}
function error () {
console.log('Введены некорректные данные');
}
function start () {
for(var i = 0; i < audioPlayCount; i++) {
queue.push(setTimeout(play, 1000 * i * audioSeconds));
}
}
});