HTML 嵌入Google Drive聲音檔 Embedded Google Drive audio file in HTML

在HTML5 網頁嵌入Google Drive的MP3聲音檔。

在檔案上按滑鼠右鍵，點選[+Share]，

選擇把檔案改為分享[Anyone with the line can view]，並複製分享連結：
https://drive.google.com/file/d/1UqF0kAxwxFhFHdmYRpjiCNBOvUVdmH4H/view?usp=sharing

這個檔案的id為1UqF0kAxwxFhFHdmYRpjiCNBOvUVdmH4H

把連結改為：
https://drive.google.com/uc?export=download&id=1UqF0kAxwxFhFHdmYRpjiCNBOvUVdmH4H

在HTML文件中使用<audio>標籤把Google Drive聲音檔嵌入。

<audio controls="controls" style="width:800px;">
  <source src="https://drive.google.com/uc?export=download&id=1UqF0kAxwxFhFHdmYRpjiCNBOvUVdmH4H">
</audio>

嵌入的效果如下。

或是用<iframe>標籤嵌入，把後面的view改成preview。

<iframe 
  frameborder="0"
  width="400"
  height="200"
  src="https://drive.google.com/file/d/1UqF0kAxwxFhFHdmYRpjiCNBOvUVdmH4H/preview">
</iframe>

嵌入的效果如下。

參考：

• How to play google drive mp3 file using html audio tag?