今天在小舖上看到有人在問如何在網頁中嵌入自己的音樂並可隨使用者的選擇來播放不同的音樂,看了一下覺得挺有趣的,就自己嘗試寫了一下,內容摘要如下
今天在小舖上看到有人在問如何在網頁中嵌入自己的音樂並可隨使用者的選擇來播放不同的音樂,看了一下覺得挺有趣的,就自己嘗試寫了一下,內容摘要如下:
我先在aspx中加入一個Label跟一個下拉選單,下拉選單設定為autopostback,
1 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
2 <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Height="38px"
3 OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="183px">
4 <asp:ListItem Value="01.mp3">第一首</asp:ListItem>
5 <asp:ListItem Value="02.mp3">第二首</asp:ListItem>
6 </asp:DropDownList>
2 <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Height="38px"
3 OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="183px">
4 <asp:ListItem Value="01.mp3">第一首</asp:ListItem>
5 <asp:ListItem Value="02.mp3">第二首</asp:ListItem>
6 </asp:DropDownList>
然後在cs端我是這麼寫的,透過Label1,我將一段html內容嵌到aspx中,這段內容主要是透過<embed>的方式將一個檔案嵌到網頁中,其中有幾個屬性需要留意:
1.src:代表要嵌入的檔案
2.width、height:高度與寬度,不能設定的太小,否則會看不清楚,沒設的話預設極小
3.autostart:代表載入完成後是否自動撥放
4.repeat:代表是否重複播放
01
protected void Page_Load(object sender, EventArgs e)
02
{
03
if (!Page.IsPostBack)
04
{
05
Label1.Text = "<embed src=\"01.mp3\" width=\"250\" height=\"50\" autostart=\"true\" repeat=\"true\" > </embed>";
06
}
07
}
08
09
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
10
{
11
12
Label1.Text = String.Format("<embed src=\"{0}\" width=\"250\" height=\"50\" autostart=\"true\" repeat=\"true\" loop=\"true\"> </embed>", DropDownList1.SelectedValue);
13
}
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/None.gif)
02
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockStart.gif)
03
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
04
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
05
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
06
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
07
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockEnd.gif)
08
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
09
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
10
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedSubBlockStart.gif)
11
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
12
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/InBlock.gif)
13
![](http://www.dotblogs.com.tw/Providers/BlogEntryEditor/FCKeditor/editor/dialog/InsertCode/codeimages/ExpandedBlockEnd.gif)
這樣就完成一個簡單的歌曲播放囉,只要在稍微改一下應該就可以作到playlist的功能了,蠻有趣的。
![]() |
游舒帆 (gipi) 探索原力Co-founder,曾任TutorABC協理與鼎新電腦總監,並曾獲選兩屆微軟最有價值專家 ( MVP ),離開職場後創辦探索原力,致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關,都是在為未來儲備能量,2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》,為培養台灣未來的領袖而努力。 |