這是之前寫的用H5制作的音樂播放器,前三節(jié)其實已經做得差不多了,音軌的制作原理已經在上一節(jié)說明,不過一直還沒有和音樂對接。

本章作為該系列的一個完結篇,我會專門把動態(tài)音軌的實現(xiàn)代碼貼出來,demo地址會在文章最后給出。

為了盡可能保持條理清晰,我就重新開一個頁面來說明吧。你把本文的代碼拷過去,應該是可以直接運行的。(當然,音樂文件需要換成你本地的)

1. 畫一個demo頁

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>音軌和音樂對接</title> </head> <body> </body> </html> 

在這個頁面的head部分添加一個style塊,我就不單獨整css文件了,把所有的樣式都寫在一個頁面吧。

給body添加一個線性背景

body { background:-web