Tai Chi metronome 5 fixed beeps

Tai Chi breathing rate is fixed at 5 time settings signified by a monotone beep. Volume controled by a slider with Start and Stop buttons.
Fixed inputs - Stop/Start, beep duration 150ms, frequency 440 hz, type sine,
Volume range min 0.1 Max 0.4 (0-1). Breating tempo 2.5, 3.0, 3.75, 4.5, 5.0sec
Beep Interval = Beep rate - beep duration 2350, 2858, 3600, 4350, 4850ms
Please help me connect the different blocks of code together


<!DOCTYPE html> 
<html lang="en">

 <head>
  <title>Tai Chi Breathing Rate</title>

	<meta name="viewpoint" content="width+device-width, initial-scale=1.0">
   <meta charset=UTF-8" />

   <style>

body	 {margin:0; padding:0; border:0; font-family:verdana,arial, helvetica, sans-serif; background:#ebf5fc; }

#box 	 {position:absolute; width:720px; left:50%; margin-left:-360px; height:470px; top:20px; border-radius: 25px; border:4px #ff8c00 solid; background:#121212;}

#but     {position:relative; left:50%; width:600px; margin-left:-300px; top: 45px; border:0px #ff8c00 solid; background:#121212;} 


p	{padding-left:0px; padding-right:0px; text-align:center;margin-top:-50px;font-size:12px; line-height:120%; color:#8dcb41;} 

h1	{font-size:25px; color:#d1004b; text-align:center; margin-top:30px;}

/* xxx radio button xxx */

.radio-toolbar {display:block; margin-left:auto; margin-right:auto; width:500px; padding-left:40px; margin-top:30px; }
.radio-toolbar input[type="radio"] { opacity: 0; position: fixed; width: 0; }

.radio-toolbar label {
    display: inline-block; background-color: #ddd; padding: 10px 10px;
    font-family: sans-serif, Arial; font-size: 20px;
    border: 3px solid #ff8c00; border-radius: 10px;
}

.radio-toolbar label:hover { background-color: #dfd; }

.radio-toolbar input[type="radio"]:focus + label { border: 2px dashed #444; }

/* .radio-toolbar input[type="radio"]:checked + label { background-color: #bfb; border-color: #4c4; } */


.tooltips, .tooltipp, .tooltipv {
	position: relative;    // position: absolute;  z-index: 1;
  	display: inline-block;
  	visibility: visable;
  	background-color: #ececec;
	color: #fff;
        font-size:25px;
        color:green;
	font-size:15px;
  	text-align: center;
        border: 2px solid red;
        border-radius: 25px;
  	padding: 10px;
	top:-80px;
	  }

.tooltips { width: 100px;  margin-left:-50px;}
.tooltipp { width: 100px; top:-80px; margin-right:-50px;}
.tooltipv { width: 150px; top: -80px; }

  </style>

<script>
// gain, frequency, duration from StackOverflow how to make a short beep

// xxx gain - 10db frequency - 440hz  duration - 150msec




// xxx id = radio 24  interval 2.5s = 2350ms xxxxxx

function beep radio24() 

let a = new AudioContext()
function k(w,x,y){
 console.log("Gain:"+w, "Hz:"+x, "ms:"+y)
  v = a.createOscillator()
  u = a.createGain()
  v.connect(u)
  v.frequency.value = x
  v.type = "square"
  u.connect(a.destination)
  u.gain.value = w * 0.01
  v.start(a.currentTime)
  v.stop(a.currentTime + y *0.001)

setInterval(function(){ k(10,440,150);}, 2350)
// gain db, tone hz, duration ms  interval ms

oscillator.start();

setTimeOut ( function() {oscillator.stop();
}


// xxxxx radio20 interval 3.0s = 2850ms  xxxxxxx 


let a = new AudioContext()
function k(w,x,y){
 console.log("Gain:"+w, "Hz:"+x, "ms:"+y)
  v = a.createOscillator()
  u = a.createGain()
  v.connect(u)
  v.frequency.value = x
  v.type = "square"
  u.connect(a.destination)
  u.gain.value = w * 0.01
  v.start(a.currentTime)
  v.stop(a.currentTime + y *0.001)

setInterval(function(){ k(10,440,150);}, 2350)
// gain db, tone hz, duration ms  interval ms

oscillator.start();

setTimeOut ( function() {oscillator.stop();
}

// volume control

let volume = document.querySelector("#volume-control");
volume.addEventListener("change", function(e) {
audio.volume = e.currentTarget.value / 100;
})


</script>

  </head>

 <body>

<div id="box">

       <h1>Tai Chi <br />Breathing Rate </h1>

  <div class="radio-toolbar">
    <input type="radio" id="radio24" name="metro" value="bars24" onClick="beep (50,440,150)"> <label for="radio24">2.5s<br />&nbsp;96</label>
  &nbsp; &nbsp; &nbsp; 
    <input type="radio" id="radio20" name="metro" value="bars20" onClick="beep (50,440,150)">  <label for="radio20">3.0s<br />&nbsp;80</label>
  &nbsp; &nbsp; &nbsp;
    <input type="radio" id="radio16" name="metro" value="bars16" checked onClick="beep (50,440,150)">  <label for="radio16">3.75s<br />&nbsp;&nbsp;64</label> 
  &nbsp; &nbsp; &nbsp;
    <input type="radio" id="radio13" name="metro" value="bars13" onClick="beep (50,440,150)">  <label for="radio13">4.5s<br />&nbsp;52</label>
  &nbsp; &nbsp; &nbsp;
    <input type="radio" id="radio12" name="metro" value="bars12" onClick="beep (50,440,150)">  <label for="radio12">5.0s<br />&nbsp;48</label> 

  </div>  <!--/class -->

<br /><br />

	 <div id="but">

	     <br /> &nbsp;  &nbsp; &nbsp;<br />
              <center>
	               <div class="tooltipv">Volume <br />    

			<input type="range" id="volume-control"> Volume </input><br />
        	     </div>   
   
         <br />&nbsp;<br />

    	  	<input class="tooltips" value="Start" onClick="oscillator.start"</input> Start

	&nbsp; &nbsp; &nbsp; 

	 	<input class="tooltipp" value="Stop"  onClick="oscillator.stop"</input>Stop
 
      </center>

<p>
Breathing is a fundamental part of Tai Chi. This App is to allow learners to practice 
<br />
at 5 different breathing tempos from fast to slow. Breaths/sec - 4/4 - Beats/minute
</p>
        </div>  <!-- but  --> 
    </div> <!-- box --> 
 </body>
</html>

Do you have a question?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks, made the code readable Tony