• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見(jiàn)問(wèn)題 >> 前端開(kāi)發(fā) >> JavaScript教程 >> 使用Javascript制作聲音按鈕

使用Javascript制作聲音按鈕

• 作者：創(chuàng)新互聯(lián) 文章來(lái)源：前端開(kāi)發(fā)部 點(diǎn)擊數(shù)： 更新時(shí)間：2008-10-11
• 　　一般而言，網(wǎng)頁(yè)中按鈕是沒(méi)有聲音觸發(fā)事件的。如果要讓按鈕響應(yīng)鼠標(biāo)動(dòng)作發(fā)出聲音，我們可以寫一段javascript腳本代碼來(lái)實(shí)現(xiàn)。
  　　能讓按鈕發(fā)出聲音的腳本，這下不用制作flash按鈕也可以了，我試用的感覺(jué)還不錯(cuò)。
  制作方法：
  　　1、新建文件：
  DynamicAudioButton.js ，代碼：
  //Customize Dynamic Audio Link 自定義動(dòng)態(tài)聲音鏈接
  function DynamicAudioLink(){
      open("http://www.pcedu.com.cn")
  }
  //Customize Dynamic Audio Mouse Over Color 自定義動(dòng)態(tài)聲音mouseover顏色
  function AudioOver() {
      document.Audio.button.style.background="#999999"
      document.Audio.button.style.color="white"
  }
  //Customize Dynamic Audio Mouse Down Color 自定義動(dòng)態(tài)聲音mousedown顏色
  function AudioDown() {
      document.Audio.button.style.color="#cccccc"
  }
  //Customize Dynamic Audio Mouse Off Color 自定義動(dòng)態(tài)聲音mouseOff 顏色
  function AudioOut() {
      document.Audio.button.style.background="#666666"
      document.Audio.button.style.color="#ffffff"
  }
  //Customize Dynamic Audio sound 自定義動(dòng)態(tài)聲音
  function playHome()
  {
      document.all.sound.src = "bleep.wav";
  }
  document.write('<bgsound id="sound">')
  //Customize Button Style 自定義按鈕樣式
  document.write('<style type="text/css">'+'<!--')
  document.write('.select{background:#666666;border-color:"#999999";color:"#ffffff";font-family:Arial,Helvetica,Verdana;font-size:10pt;font-weight: bold;}'+'-->'+'</STYLE>')
  document.write('<center><form name=Audio><input class="select" name=button type="button" value="Dynamic Audio" onclick="DynamicAudioLink()" onMouseOver="AudioOver();playHome()" onMouseDown="AudioDown()" onMouseOut="AudioOut()"></form></center>')
  　　2、保存文件后，在頁(yè)面相關(guān)處插入代碼引用該JS文件：
  <Script language="JavaScript" SRC="DynamicAudioButton.js"></script>
  　　3、選擇好音樂(lè)文件，可以是wav、mp3等，音樂(lè)文件盡量小些。
  　　方法制作完成，用戶可以使用圖片等形式，當(dāng)然也得修改 DynamicAudioButton.js 文件相應(yīng)的代碼。
• JavaScript技巧:讓網(wǎng)頁(yè)自動(dòng)穿上外套 :上一篇
  用JavaScrpt實(shí)現(xiàn)文件夾輕松加密 :下一篇