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

解决思路：

       在很多音乐或影视下载站上都有这样的功能，一个音乐列表，在单击链接时将播放相应音乐。其实就是动态设置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参数中包含的音乐文件地址，再进行设置。


vjava单击按钮播放音乐 点击按钮播放音乐_目标文件