成功提取音樂文件的ID3信息后，面臨將數(shù)據(jù)轉(zhuǎn)換為圖片的問題發(fā)現(xiàn)需要將byte數(shù)組轉(zhuǎn)換為base64格式的圖片找到前輩的代碼示例，直接使用以解決問題最終，音樂播放器成功獲取了封面圖片，這是一個激動人心的時刻接下來，將專注于HTML和CSS的實現(xiàn)，將音樂播放器的界面設(shè)計得更美觀更友好總結(jié)，這次使用。

HTML5中引入音視頻標簽，簡化了音視頻的直接播放本篇文章將通過使用H5的audio標簽及其相關(guān)屬性和方法，構(gòu)建一個簡單的音樂播放器該播放器主要具備以下功能播放暫停上一首和下一首調(diào)整音量和播放進度條根據(jù)列表切換當(dāng)前歌曲音樂播放器的結(jié)構(gòu)主要分為三部分歌曲信息播放器和播放列表播放器。

自學(xué)前端，我制作了一個HTML音樂播放器我不精算法，不識數(shù)據(jù)結(jié)構(gòu)，對面向?qū)ο蠹邦惻c函數(shù)編程的差異也一知半解大學(xué)時學(xué)習(xí)C語言，未曾接觸過面向?qū)ο缶幊膛既坏拇a實踐，心血來潮嘗試了HTMLJSCSS，制作了一個簡陋的音樂播放器CSS部分幾乎無任何美化，僅具入門級別，望諸位大神不吝賜教，若有。

lt！DOCTYPE htmllthtml lang=quotenquotlthead ltmeta charset=quotUTF8quot lttitleTitlelttitleltheadltbody ltaudio controls ltsource src=quotziwojieshaoMusic123mp3quot type=quotaudiompegquot lt！音樂文件路徑自己寫 ltaudioltbodylthtml。

第一種在頁面代碼中的ltstyleltstyle之間加入ltbgsound src=quot音樂urlquot loop=quot1quot 這段代碼 在這里要說的是，“l(fā)oop”中的數(shù)值是音樂循環(huán)的次數(shù)，可設(shè)置為任意正整數(shù)，若設(shè)為“1”的話，音樂將永遠循環(huán) 這種背景音樂是打開葉子后直接播放的，在網(wǎng)頁上不會有顯示這是最簡單的一種。

一在ASPASPNet MVC音樂播放的HTML代碼網(wǎng)頁二為了控制音頻播放和暫停，應(yīng)該添加JS代碼，如下所示三實現(xiàn)前臺處理方法的代碼四用于后臺處理的方法代碼五支持HTML5瀏覽器效果1六如果不支持HTML5瀏覽器，效果如下。

HTML5中的video和audio標簽中有一個autoplay屬性，添加這個屬性后就會在文件加載完成以后自動播放具體代碼如下videoltvideo autoplay=quotautoplayquot ltsource src=quot視頻路徑quot ltvideoaudioltaudio autoplay=quotautoplayquot ltsource src=quot視頻路徑quot ltaudio除此屬性外還有如下屬性controls。

這個代碼要不要，有百度音樂酷狗音樂豆瓣電臺音樂盒蝦米音樂一聽音樂等等音樂臺組合的音樂播放器ltiframe id=TV name=TV frameborder=0 scrolling=no src= width=960 height=630ltiframe。

HTML代碼中插入音樂播放器，大致有四種風(fēng)格，代碼如下白色普通播放器代碼ltEMBED height=45 type=audiompeg width=300 src=音樂地址 volume=quot0quot loop=quot1quotltEMBED 黑色播放器代碼ltEMBED style=quotFILTER Xrayquot src=音樂地址 width=300 height=45 type=audiompeg loop=quot1quot volume=quot0quot。

這個音樂播放器代碼，長度960及高度620可調(diào)，多款音樂臺自由切換以下為代碼ltdivltembed height=quot620quot allownetworking=quotinternalquot width=quot960quot allowscriptaccess=quotneverquot loop=quot1quot invokeurls=quotfalsequot src=quot type=quotaudiompegquot wmode=quottransparentquotlt。

方法在你想要插入播放器的部分可以是表格或者層，加入以下代碼就可以了 ltiframename=quotmusicquotmarginwidth=0arginheight=0src=quotmusicindexhtmlquotframeborder=0scrolling=quotnoquot width=100% height=40pxltiframe 說明一般只需把 src ＝后面的鏈接換成自己音樂播放器的地址就可以了，可以是相對。