canplay event does not occur on Google Chrome mobile until Audio.play() is called

try {
  
  var a = new Audio("https://storytime.voxsnap.com/1/audio/2017/03/26/GoTime-New_Years_Tips.mp3");
  a.addEventListener("timeupdate", function(e) {
    document.getElementById("progress").max = this.duration;
    document.getElementById("progress").value = this.currentTime;
  })
  a.addEventListener("canplay", function() {
    console.log("Can play.");
    const button = document.getElementById("playstop");
    button.removeAttribute("disabled");
    button.innerHTML = "";
    button.appendChild(new Text("Play"));
  });
  a.addEventListener("error", function() {
    console.log("Audio error.");
    document.body.appendChild(new Text("ERROR: "+a.error));
  });
  a.addEventListener("loadstart", function() {
    console.log("Loading started.");
  });
  a.addEventListener("loadedmetadata", function() {
    console.log("Metadata loaded. Duration: "+this.duration);
  });
  
  
  document.getElementById("playstop").addEventListener("click", function() {
    this.innerHTML = "";
    if(a.paused) {
      this.appendChild(new Text("Pause"));
      a.play();
    }
    else {
      this.appendChild(new Text("Play"));
      a.pause();
    }
  })
  
}
catch(e) {
  document.body.appendChild(new Text("ERROR: "+e.message+"\n\n"+e.stack));
}

progress {
  width: 100%;
  
}

    <progress id="progress" value="0" max="100"></progress>
    <button id="playstop" disabled="disabled">
    loading...
    </button>