查看完整版本: 使用Javascript制作声音按钮

使用Javascript制作声音按钮

文章简介：　　一般而言，网页中按钮是没有[wiki]声音[/wiki]触发事件的。如果要让按钮响应[wiki]鼠标[/wiki][wiki]动作[/wiki]发出声音，我们可以写一段JavaScript脚本代码来实现。
　　能让按钮发出声音的脚本，这下不用制作Flash按钮也可以了，我试用的感觉还不错。
　　制作方法：
　　1、新建文件：
以下是引用片段：
DynamicAudioButton.js，代码：
//CustomizeDynamicAudioLink自定义动态声音链接
functionDynamicAudioLink(){
open("http://www.pcedu.com.cn")
}
//CustomizeDynamicAudioMouseOverColor自定义动态声音mouseover颜色
functionAudioOver(){
document.Audio.button.style.background="#999999"
document.Audio.button.style.color="white"
}
//CustomizeDynamicAudioMouseDownColor自定义动态声音mousedown颜色
functionAudioDown(){
document.Audio.button.style.color="#cccccc"
}
//CustomizeDynamicAudioMouseOffColor自定义动态声音mouseOff颜色
functionAudioOut(){
document.Audio.button.style.background="#666666"
document.Audio.button.style.color="#ffffff"
}
//CustomizeDynamicAudiosound自定义动态声音
functionplayHome()
{
document.all.sound.src="bleep.wav";
}
document.write('%26lt;bgsoundid="sound"%26gt;')
//CustomizeButtonStyle自定义按钮样式
document.write('%26lt;style[wiki]type[/wiki]="text/css"%26gt;'+'%26lt;!--')
document.write('.select{background:#666666;border-color:"#999999";color:"#ffffff";font-family:Arial,Helvetica,Verdana;font-size:10pt;font-weight:bold;}'+'--%26gt;'+'%26lt;/STYLE%26gt;')
document.write('%26lt;center%26gt;%26lt;formname=Audio%26gt;%26lt;inputclass="select"name=buttontype="button"value="DynamicAudio"%26gt;%26lt;/form%26gt;%26lt;/center%26gt;')

　　2、保存文件后，在页面相关处插入代码引用该JS文件：
以下是引用片段：
%26lt;Scriptlanguage="JavaScript"SRC="DynamicAudioButton.js"%26gt;%26lt;/script%26gt;

　　3、选择好音乐文件，可以是wav、MP3等，音乐文件尽量小些。
　　方法制作完成，用户可以使用图片等形式，当然也得修改DynamicAudioButton.js文件相应的代码。