2021年7月22日 星期四

【教學】音樂播放器嵌入語法

語法:

<audio autoplay="autoplay" controls="controls" controlslist="nodownload" loop="loop" style="width: 250px; height:20px;">
<source src="(音樂網址)" type="audio/(音樂檔案類型)" />You cannot use audio tag with your browser</audio>

  • autoplay:自動播放
  • loop: 循環播放
  • type:音樂屬性
    (和音樂檔案同類型,例如:mp3音樂檔的type為audio/mp3。)
  • width:播放器寬度
  • height:播放器高度

おとわび的〈古都に咲く花〉示範,音樂網址是https://static.wixstatic.com/mp3/90faaf_6702e7d03f9b4d1ebffc32ebff9e84ed.mp3,音樂檔案格式是mp3,語法會長這樣:
<audio autoplay="autoplay" controls="controls" controlslist="nodownload" loop="loop" style="width: 250px; height:20px;">
<source src="https://static.wixstatic.com/mp3/90faaf_6702e7d03f9b4d1ebffc32ebff9e84ed.mp3" type="audio/mp3" />You cannot use audio tag with your browser</audio> 

※ Google 雲端硬碟、One Drive不開放外連 


如果想用Youtube Music的歌的影片語法,以《江南》為例子:
https://music.youtube.com/watch?v=QUNcX9Z3Mqo&list=RDAMVMQUNcX9Z3Mqo

<iframe allowfullscreen="" height="266" src="https://www.youtube.com/embed/QUNcX9Z3Mqo" width="320" youtube-src-id="QUNcX9Z3Mqo"></iframe>
height="影片高度"
width="影片寬度"
兩個QUNcX9Z3Mqo取自v=和&之間的「英文數字」

顯示如下: 


15 則留言 :

  1. 請問怎麼沒有成功?檔案類型要改成什麼?

    回覆刪除
    回覆
    1. 如果您的檔案類型是mp3,(音樂檔案類型)改成mp3,像這樣:
      type="audio/mp3"

      刪除
    2. 如果想用Google雲端和OneDrive的音樂網址,可能會失效,兩者有防止外連

      刪除
  2. 我是用youtube的音樂網址 那音樂檔案類型要寫html嗎?

    回覆刪除
    回覆
    1. Youtube上的皆是影片,沒法套用音樂撥放器。

      可以點影片下方的分享,再點「嵌入」,複製影片語法。
      影片大小從第一行的width="560" height="315"調整數字

      刪除
    2. 因留言無法貼Youtube Music的影片語法,已更新在文章內,請參考看看是不是需要的。

      刪除
  3. 影片已經成功了 謝謝 。那請問音樂檔的音樂網址要貼什麼?

    回覆刪除
    回覆
    1. 通常音樂檔的音樂網址結尾會是mp3、wma、wav結尾。
      最常見的是mp3結尾,不會是html。html是網頁,不是音樂。

      刪除
  4. 不好意思 可以請你示範一下嗎?音樂檔的部份 因為我沒成功 謝謝

    回覆刪除
    回覆
    1. 已在文章內更新示範的語法,請參考

      刪除
  5. 請問本身就有mp3檔 那要怎麼變成網址?謝謝

    回覆刪除
    回覆
    1. 通常來說,會將音樂檔上傳至自家網站的空間。
      例如:申請免費網站,建立自己的網站,就有一定額度的空間可以上傳圖片、音樂、影片等,並且在網站上公開分享。
      如果要上傳音樂檔並公開分享,最好注意是否有著作權的問題。

      刪除
    2. 上傳音樂檔後,可以在上面找到該音樂檔的連結網址。

      刪除