如何在網頁中插入自動播放的音樂?使用於任何網頁

網站功能不用太多,本身須要的就行了,本身的博客慢慢的完善,一個一個功能的增長,都是本身須要並且實用的,本身動手纔會珍惜!css

    這音樂的功能很簡單,一段代碼而已:c#

    

<audio controls autoplay="autoplay" loop="loop">
<source src="http://lykezhan.com/test.mp3" type="audio/mpeg" />
  若是不播放,說明你的瀏覽器不支持!
</audio>

       

 加上去以後會有這麼一個播放器顯示瀏覽器

image.png

    相信誰都能理解,可是幾點注意,我後面爲何還要多加一個「loop」?這不是和「autoplay」重複了麼?oop

    是的,重複,可是不矛盾,我本身的網站若是不加「loop」,是不會自動播放的。網站

    爲了美觀我還會加上hidden,隱藏播放器,達到點進去網頁就播放code

    只有不多數而特殊的網頁我纔會用上音樂!blog

    接下來就把代碼寫到模板頁面,而後後臺編輯文章頁面添加一個文本框,進行方便輸入音樂地址。博客

    

image.png

    這樣就很方便的在添加文章的時候隨意了,固然要在特殊的模板中,否則的話,每個頁面都要加載一個播放器,不是讓網站變的很臃腫麼?因此複製新建一個模板頁面,在須要添加音樂的時候就選擇那個模板頁面就行了!it

    改版完成,我只在「生活日記」欄目添加了音樂功能,模版的代碼改爲:io

<audio controls autoplay="autoplay" loop="loop" style="display:none;">
<source src="{dede:field.shorttitle/}" type="audio/mpeg" />
  若是不播放,說明你的瀏覽器不支持!
</audio>

 須要注意的是要在欄目哪裏修改文章內容模板!

相關文章
相關標籤/搜索