Question

我做了一个简单的音频播放器。原谅赛道，但我需要不受CORS保护的在线MP3赛道：

＆＃13;

items = (SELECT * From Tbl_Products);
foreach(var pr in items)
{
   SP_Update_Products(pr.ProductId,pr.ProductUrl,pr.ShopId);
}

＆＃13;

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));
}

＆＃13;

progress {
  width: 100%;
  
}

＆＃13;

现在这很好用，不是吗？但不是Android的谷歌浏览器。问题是<progress id="progress" value="0" max="100"></progress> <button id="playstop" disabled="disabled"> loading... </button>事件没有发生 - 在调用canplay之前，Google Chrome不会开始下载完整文件。但是在我知道可以播放音频之前我不能打电话给.play()，所以我有点卡住了。

这里的正确方法是什么？

在调用Audio.play（）之前，Google Chrome移动设备上不会发生canplay事件

0 个答案: