今天來講解一下如何給微信小程序的按鈕添加點(diǎn)擊音效

注意：這里的按鈕不一定只是 <button>，也可以是一張圖片，其實(shí)只是添加一個(gè)監(jiān)聽點(diǎn)擊事件的函數(shù)而已?

首先來看下按鈕的定義

<button bind:tap="onInput" >點(diǎn)我有音效，來試試看？</button>

定義?button 按鈕，同時(shí)給按鈕添加了監(jiān)聽點(diǎn)擊事件，一旦監(jiān)聽到按鈕被點(diǎn)擊了，就會執(zhí)行?onInput() 函數(shù)?

此時(shí)，只需要在 onInut()?函數(shù)中設(shè)置音效的相關(guān)配置即可?

onInput: function(e){
    // 這里的參數(shù) e 若其他功能無需使用到也可以不用
    // 這里可以寫除了音效以外的功能

    // 按鈕點(diǎn)擊音效
    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.autoplay = false  // 是否自動開始播放，默認(rèn)為 false
    innerAudioContext.loop = false  // 是否循環(huán)播放，默認(rèn)為 false
    wx.setInnerAudioOption({    // ios在靜音狀態(tài)下能夠正常播放音效
      obeyMuteSwitch: false,   // 是否遵循系統(tǒng)靜音開關(guān)，默認(rèn)為 true
      // 當(dāng)此參數(shù)為 false 時(shí)，即使用戶打開了靜音開關(guān)，也能繼續(xù)發(fā)出聲音
      success: function (e) {
        // 可以省略
      },
      fail: function (e) {
        // 可以省略
      }
    })
    // 音頻文件路徑
    innerAudioContext.src="/music/dial.mp3"
    // 音頻播放
    innerAudioContext.play()

    // 這里可以寫除了音效以外的功能
  }

其實(shí)原理很簡單，就是創(chuàng)建了一個(gè)音頻對象，然后對音頻對象的各項(xiàng)屬性進(jìn)行了配置，如是否自動播放、是否循環(huán)播放、文件路徑，最后調(diào)用音頻對象的 play()?方法，這樣音頻就會播放了

到這里，關(guān)于給按鈕添加音效的講解就結(jié)束了?

那么，可能有同學(xué)就要問了，音效文件在哪里可以找到？?

在這里我也教你們一個(gè)方法，可以隨便找一個(gè)下載音頻的網(wǎng)站?

但是這些資源下載一般都是要收費(fèi)的，?那么問題來了，怎么免費(fèi)下載到呢？

按下鍵盤上的 “F12”，就會看到這樣一個(gè)界面

選擇 “Network” - “Media”（中文對應(yīng) “網(wǎng)絡(luò)” - “媒體”），然后點(diǎn)擊左上角 “清空”

接著在網(wǎng)頁上點(diǎn)擊播放你要的那一段音頻，此時(shí)在上圖的下方空白處就會出現(xiàn)對應(yīng)的音頻文件了

接著右鍵點(diǎn)擊那個(gè)文件，選擇 “Open?in?new?tab”（在新的頁面打開）?

最后點(diǎn)擊最右側(cè)的四個(gè)點(diǎn)，選擇下載即可?

注意哦！這個(gè)方法不僅僅音頻可以，視頻也一樣可以這樣操作，除非網(wǎng)站做了特殊處理，不然都是可以成功操作的！

注意！注意！注意！個(gè)人學(xué)習(xí)使用可以，若為商業(yè)行為，造成侵權(quán)，概不負(fù)責(zé)?。?！?

若是音頻文件需要裁剪，又不想下載如?AU?這些專業(yè)音頻剪輯軟件，可以選擇以下網(wǎng)站進(jìn)行裁剪（注：非廣告行為，僅學(xué)習(xí)推薦）

音頻剪切器 mp3剪切 在線音頻截取_免費(fèi)在線工具-愛給網(wǎng)https://www.aigei.com/tool/audio/trim?

一? 葉? 知? 秋，奧? 妙? 玄? 心?文章來源地址http://www.zghlxwxcb.cn/news/detail-772922.html

到了這里，關(guān)于微信小程序——給按鈕添加點(diǎn)擊音效的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！