Also asked on:
https://icanplaypiano.com/
Synthesizer and .mp3 notes play twice on Android-nowhere else
Does anyone know why-This code works fine on laptops, ipads, iphones but plays double (one repeat) notes on Android phone systems:
I also have Google Analytics code (not shown)
Same doubles problem if I create the sound in P5.js with their synthesizer or if I use P5.js to play .mp3 musical notes.
<!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;
}