Synth and .mp3 notes play twice on Android-nowhere else

p5.js Libraries
1

Does anyone know why-This code works fine on laptops, ipads, iphones but plays double (one repeat) notes on Android phone systems:

<!DOCTYPE html><html 	lang="en">
  
<head>
  
    <script src="https://icanplaypiano.com/p5.js"></script>
    <script src="p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
  
  /*
      #editor {
        width: 100%;
        height: calc(100% - 40px);
      }
  */
  
      #go {
        width: 135px;
        height: 50px;
        position: relative;
        background-color: #4CAF50;
        top: 340px; left: 840px;
        border: 4px solid rgb(212, 19, 19);
        border-radius: 48px;
        font-size: 40px;
        color: white;
        text-align: center;
        line-height: 45px;
        margin: 10px;
      }
  
      #go:hover {
        background: rgb(255, 0, 250);
        cursor: pointer;
      }
  
      #gosub1 {
        width: 135px;
        height: 50px;        
        position: relative;
        background-color: #4CAF50;
        top: 340px; left: 840px;
        border: 4px solid rgb(212, 19, 19);
        border-radius: 48px;
        font-size: 40px;
        color: white;
        text-align: center;
        line-height: 40px;
        margin: 10px;
      }
  
      #gosub1:hover {
        background: rgb(0, 255, 42);
        cursor: pointer;
      }
  
      #yellowStart {
        width: 335px;
        height: 50px;        
        position: relative;
        background-color: #0d0d0bde;
        top: 2  40px; left: 340px;
        border: 4px solid rgb(212, 19, 19);
        /* border-radius: 48px; */
        font-size: 40px;
        color: rgba(18, 11, 11, 0.922);
        text-align: center;
        line-height: 50px;
        margin: 10px;
      }
    </style>
  
  </head>
  <body>
   
   
   <p class="p1" >PRESS Yellow Button to START</p>


  <select id="change_chart" class="dropdown" onChange="drawStuff(this)">
    <option value="1" selected>TwinkeTwinke</option>
    <option value="2">Pop Songs</option>
    <option value="3">Nursery Songs</option>
  </select>
<!--   change_chart.position(850, 350);-->

  <div id='go' class="parent"  onclick='go()'>Faster</div>
  <div id='gosub1' onclick='go1()'>Slower</div>
<!-- <div id='yellowStart' onclick='start()'>Click Here to Start</div> -->

  <script src="5sketch.js"></script>

</body></html>

html, body {
  margin: 0;
  padding: 0;
  background-color: #0b0b09;
  
}
canvas {
  display: block;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  position: relative;
  color: rgb(244, 20, 20);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.dropdown{
  color: rgb(244, 20, 20);
  position: relative;
  top: 0px;
  font-size: 40px;
  background-color: #4CAF50;
}

.p1{
  /* background-color: #4CAF50; */
  color: rgb(250, 80, 250);
  position: relative;
  left: 500px;
  top: 50px;
  font-size: 40px;  
}

.parent{
  background-color: #4CAF50;
}


//var button;
var w = window.innerWidth;
var h = window.innerHeight;

let amps = [1,1,1,.7,.3,1,1,1,1,1,1,.6,1,1,1,1,1,.6,1,1,1,1,1,.6,1];
//let jmps = [1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1];
//let jmps = [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2];
//let jmps = [3,1,3,1,3,1,1,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2];
//let jmps = [1,2,1,2,1,2,1,2,1,2,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1];
//let jmps = [3,3,3,3,2,3,3,3,3,3,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1];
// old x 10 / 2 + 10
let jmps = [40,50,40,60,70,70,20,30,40,60,80,10,20,20,30,30,40,40,50,60,60,50,50,10,10];
var wave;
var amp;
var slider;
var speed=1;
var playing = false;
let bubbles = [];
let time = .25;
let t= 1;
//let waves = [];
//let freqs = [392,440,392,494,523,523,330,370,392,494,587,294,294,392,440,294,330,294,294,370,392,294,330,294,294];
var freq;
let xs = [410,500,410,600,700,700,200,350,410,700,800,100,200,200,350,350,400,400,500,600,600,500,500,100,100];
let ys = [-2100,-2000,-1900,-1800,-1700,-1600,-1500,-1400,-1300,-1200,-1100,-1000,-900,-800,-700,-600 ,-500,-400,-300,-200,-100,0,100,200,300];

var song;
var slider;
var button;
var jumpButton;
var togglePlaying;

var menu = document.getElementById("change_chart");
menu.addEventListener("change", generateData);

function generateData(event) {
  if (menu.value == '1') {
    // alert(1);
    window.location.replace('https://leafyplace.com/types-of-trees/');   
  } else if (menu.value == '2') {
    // alert(2);
    window.location.replace('https://icanplaypiano.com/SongPage/PopSongPage.html');   
  } else if (menu.value == '3') {
    // alert(3);
    window.location.replace('https://icanplaypiano.com/SongPage/NurserySongPage.html');   
  }
}

function setup() {
  createCanvas(w, h);
  //createSlider(min, max, [value], [step])
/*   slider = createSlider(-4, 3, 2.0, 0.01);
   slider.position(950, 550); */
  song = loadSound("AllBirthday-3.mp3", loaded);
  button = createButton("Click to start popping circles-refresh page to replay");
  button.position(850, 150);
  button.size(207); 
  button.style("background-color","yellow");
  //button.value = "Red";
  //txt = createP("some Text");
  // var drop = document.getElementById("change_chart");
  // drop.position(750, 250);
  //button.padding="215px" ; 
  button.mousePressed(togglePlaying);
 /*  jumpButton = createButton("jump");
  jumpButton.mousePressed(jumpSong); */
  background(51);
    for (let i = 0; i < 25; i++) {
    let x = xs[i];
    let y = ys[i];
    let r = 44;
    let b = new Bubble(x, y, r);
    bubbles.push(b);
    }
 } 
  
/* function jumpSong() {
  //var len = song.duration();
  song.jump(2);
  song.setVolume(1);
} */
function togglePlaying() {
  if (!song.isPlaying()){
    song.play();
    song.setVolume(1);
    button.html("Click to pause SOUND");
    
  } else {
    song.pause();
    button.html("Click to Activate play-slider to Left for replay");
  }
}

function loaded(){
  song.pause();	  
}

function mousePressed() {
  for (let i = bubbles.length - 1; i >= 0; i--) {
    if (bubbles[i].contains(mouseX, mouseY)) {
      //bubbles.splice(i, 1);
     
      //playing = true;
      song.jump(jmps[i]);
      console.log(jmps[i]);
      song.setVolume(1);
      //wave.stop(time);
      //waves.push(wave);     
  }
 }
  console.log(bubbles);
}


function draw() {
/*   textSize(width / 3);
  text("text", 50,50); */


  song.setVolume(1);
  background(62,41,93);
  strokeWeight(5);
  //stroke(255,0,255);
  fill(255,255,255);
  rect(60,340,90,150);
  rect(160,340,90,150);
  rect(260,340,90,150);
  rect(360,340,90,150);
  rect(460,340,90,150);
  rect(560,340,90,150);
  rect(660,340,90,150);
  rect(760,340,90,150);
  rect(860,340,90,150);
  stroke(0,0,255);
  fill(0,0,0);
  rect(10,300,82,90);
  rect(110,300,82,90);
  rect(310,300,82,90);
  rect(410,300,82,90);
  rect(510,300,82,90);
  rect(710,300,82,90);
  rect(810,300,82,90);
  
  if (song.isPlaying()){ 
  for (let i = 0; i < bubbles.length; i++) {
    if (bubbles[i].contains(mouseX, mouseY)) {
          bubbles[i].changeColor('magenta');
          } else {
      bubbles[i].changeColor(0);
    }

    bubbles[i].move();
    bubbles[i].show();
  }
} else { i=10
}
}

class Bubble {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.brightness = 0;
  }

 changeColor(bright) {
    color = bright;
  }

  contains(px, py) {
    let d = dist(px, py, this.x, this.y);
    if (d < this.r) {
      return true;
    } else {
      return false;
    }
  }

  move() {
    this.x = this.x;
    this.y = this.y + speed;
  }

  show() {
    stroke(255);
    strokeWeight(4);
    fill(color);
    ellipse(this.x, this.y, this.r * 2);
  }
}

function go() {
speed=speed +1;
}

function go1() {
  speed=speed -1;
  }