在网页上放了一个音乐文件，怎样实现点击一个按钮时能试听音乐

在网页上放了一个音乐文件，怎样实现点击一个按钮时能试听音乐
解决思路：
       在很多音乐或影视下载站上都有这样的功能，一个音乐列表，在单击链接时将播放相应音乐。其实就是动态设置BGSOUND、EMBED或OBJECT等元素的src属性。
具体步骤：
方法一：只在本页试听。
1.先在网页中插入src为空的背景音乐标签。 

<bgsound id="bsound">

2. 实现动态设置BGSOUND元素的src属性的函数。

<script>
function playonline(url){
var obj=document.getElementById("bsound")
obj.src=url
}
</script>

3. 用按钮控制BGSOUND元素的src属性为目标文件地址。完整代码：

<bgsound id="bsound">
<button onClick="playonline(’/Music/The_Unforgiven.MP3’)">试听</button>
<button onClick="playonline(’’)">停止</button>
<script>
function playonline(url){
var obj=document.getElementById("bsound")
obj.src=url
}
</script>

方法二：新开一个小窗口试听。新窗口所加载的页面中已经做好播放音乐的控件，只等接收目标文件的参数后播放。
1.主要页面代码。

<script>
function newwin(url){
win=window.open("music.htm?url="+url,"music","width=200,height=100")
}
</script>
<button onClick="newwin(’/Music/The_Unforgiven.MP3’)">Open</button>

2.music.htm页的代码。

<button onClick="bsound.src=’’">停止播放</button>
<button onClick="self.close()">关闭窗口</button>
<script>
function QueryString(item){
//在URL中查找匹配变量item=值的字符，找到的话返回一个数组
var sValue=location.search.match(new RegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i")) 
//如果数组sValue不为空，返回它的第二项，否则返回sValue
return sValue?sValue[1]:sValue  
if(QueryString("url")){//如果URL中带有url参数
  var url=QueryString("url")//将url参数的值赋给变量url
//输出背景音乐的代码
  document.write("<bgsound id=\"bsound\" src=\""+url+"\">") 
}
</script>


3.完整演示版本 (所有代码均在同一页) 。

<script>
function newwin(url){
//将id为code的对象内的文本赋给变量code
var code=document.getElementById("code").innerText
//打开200*100大小的空白窗口
win=window.open("","music","width=200,height=100")
//将变量code中的{src}替换为参数url
win.document.write(code.replace("{src}",url))
}
</script>
<button onClick="newwin(’/Music/The_Unforgiven.MP3’)">Open</button>
<xmp style="display:none" id="code">
<bgsound id="bsound" src="{src}">
<button onClick="bsound.src=’’">停止播放</button>
<button onClick="self.close()">关闭窗口</button>
</xmp>

特别提示
方法一的代码运行效果如图1.8.3所示，单击【试听】按钮，将以背景音乐形式播放指定音乐，单击【停止】按钮则停止音乐播放。图1.8.4为方法二的完整代码演示效果。

图1.8.3 在本页实现的音乐试听

图1.8.4在弹出页中实现的音乐试听

特别说明

本例的主要知识点是对象的src属性的动态设置，方法一中直接可以设置，而方法二中必须先获取URL参数中包含的音乐文件地址，再进行设置。