JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<div id="timer"></div>

<button id='howler-play'>Play</button>
<button id='howler-pause'>Pause</button>
<button id='howler-stop'>Stop</button>
<button id='howler-volup'>Vol+</button>
<button id='howler-voldown'>Vol-</button>
<br/><br/>handle volume
<!-- Add a range input with an id of "volume-range" -->
<input type="range" min="0" max="1" step="0.1" id="volume-range" value="0.5">
<span id="volume-value"></span>

<hr/>
<h2>
Stereo Balance
</h2>
<label for="stereo-control">Stereo Balance</label>
<input type="range" id="stereo-control" min="-1" max="1" step="0.1" value="0">

<button id="left-pan">Left Pan</button>
<button id="center">Center</button>
<button id="right-pan">Right Pan</button>
<hr/>
<h2>Spatial sound</h2>
<div>
    <label for="x-pos">X Position</label>
    <input type="range" id="x-pos" min="-1" max="1" step="0.1" value="0">
    <label for="y-pos">Y Position</label>
    <input type="range" id="y-pos" min="-1" max="1" step="0.1" value="0">
    <label for="z-pos">Z Position</label>
    <input type="range" id="z-pos" min="-1" max="1" step="0.1" value="0">
</div>

JavaScript

$(function() {
  var purring = new Howl({
    src: ['https://purrpilo.com/wp-content/uploads/2023/01/acoustic.mp3'],
    loop: true,
    stereo: 0,
    volume: 0.1,
            pos: [0, 0, 0],
        pannerAttr: {
            distanceModel: 'inverse',
            rolloffFactor: 2
        }
  });

    $("#howler-play").on("click", function(){
        purring.play();
        startTimer();
    });

    $("#howler-pause").on("click", function(){
        purring.pause();
        clearInterval(intervalId);
    });

    $("#howler-stop").on("click", function(){
        purring.stop();
        clearInterval(intervalId);
    });
  //get the current value of the range input
  var currentVolume = $("#volume-range").val();
  //set the current value as text content of the "volume-value" element
  $("#volume-value").text(currentVolume);
  // Set up the event handler for the volume range input
  $("#volume-range").on("input", function() {
    var newVolume = $(this).val();
    purring.volume(newVolume);
    $("#volume-value").text(newVolume);
  });
  //spatial sound control
   $("#x-pos").on("input", function() {
var x = $(this).val();
var y = $("#y-pos").val();
var z = $("#z-pos").val();
purring.pos(x, y, z);
});
$("#y-pos").on("input", function() {
var x = $("#x-pos").val();
var y = $(this).val();
var z = $("#z-pos").val();
purring.pos(x, y, z);
});
$("#z-pos").on("input", function() {
var x = $("#x-pos").val();
var y = $("#y-pos").val();
var z = $(this).val();
purring.pos(x, y, z);
});
//stereo control
 $("#left-pan").on("click", function(){
        purring.stereo(-1);
    });
    $("#center").on("click", function(){
        purring.stereo(0);
    });
    $("#right-pan").on("click", function(){
        purring.stereo(1);
    });
$("#stereo-control").on("input", function(){
    var stereo = $(this).val();
    purring.stereo(stereo);
});
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  // function to start the timer
    function startTimer() {
       ...