javascript + html5音频播放器cors不播放动态源

Posted 2021-04-06

对不起我的英语，我正在使用翻译。

问题如下：传递Google云端硬盘上托管的音频文件的来源无效。但是如果我传递一个本地文件的来源就行了。此外，如果mp3文件在我的域中，它也可以。

例：

function _playDrive() { //dont work
  let audio = new Audio('http://docs.google.com/uc?export=download&id=ejemplo'); //is mp3
  audio.controls = true;
  audio.crossOrigin = 'anonymous';
  document.body.appendChild(audio);
  audio.play();
}

function _playLocal() { //work
  let audio = new Audio('./mysong.mp3');
  audio.controls = true;
  audio.crossOrigin = 'anonymous';
  document.body.appendChild(audio);
  audio.play();
}

我会很感激没有依赖的解决方案，thx。

答案

您需要获取文件ID，该文件ID是位于网址中的id=之后的20+字母数字。

基础

https://drive.google.com/uc?export=download&confirm=no_antivirus&id=

FILE_ID

0B1c82XNzuQ5ZU3RYSmZENERBQjQ

SOLUTION

var player = new Audio(Base + File_ID )

演示

var player = new Audio('https://drive.google.com/uc?export=download&confirm=no_antivirus&id=0B1c82XNzuQ5ZU3RYSmZENERBQjQ');
player.controls = true;
document.body.appendChild(player);
player.play();

以上是关于javascript + html5音频播放器cors不播放动态源的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 和 JavaScript 中每个音频播放器的音量滑块

使用 Javascript 播放音频元素 (html5)

JavaScript + HTML5：音频在某些情况下只会播放一次

当通过 JavaScript 填充源时，Html5 音频不会在 Safari 中播放

如何通过 javascript/html5 播放 wav 音频字节数组？

html5音频无法在chrome中播放