公眾號(hào)文章點(diǎn)擊圖片播放聲音，是怎么做到的??？
胖友們好，我是三兒。滴滴，明天就是周末了，三兒向你發(fā)起了一則語音通話，點(diǎn)擊接聽，來查收三兒的語音祝福。
很神奇有沒有！明明只是一張圖片，文章里也沒有插入任何音樂，但是點(diǎn)擊圖片之后，就有聲音了。
這種效果光聽描述就覺得很黑科技了，甚至有人說這種效果需要敲代碼，需要花錢定制。
No no no，用SVG編輯器這種好東西，做點(diǎn)擊圖片播放聲音的效果，真的很簡(jiǎn)單！
三兒給大家總結(jié)了一下，其實(shí)大致上就三步，打開SVG編輯器，往組件里放圖片放音頻，最后保存同步到微信就完了。
尤其SVG編輯器更新之后，操作就變得更簡(jiǎn)單了，話不多說，具體的操作步驟三兒還是要來跟大家演示一下的：
圖片、音頻準(zhǔn)備
準(zhǔn)備一張圖片，最好在圖片中加入引導(dǎo)點(diǎn)擊的文字或者按鈕，來引導(dǎo)讀者點(diǎn)擊。
準(zhǔn)備一段音頻，將音頻上傳到微信公眾號(hào)的素材庫中。
在公眾號(hào)后臺(tái)新建一篇文章，把你上傳的音頻插入到文章當(dāng)中，并保存這篇文章；（注意：保存文章時(shí)需要先完善封面圖和文章名）
在公眾號(hào)的草稿箱找到并打開這篇文章的預(yù)覽頁面，在網(wǎng)頁的網(wǎng)址欄復(fù)制這篇文章的網(wǎng)址（點(diǎn)擊文章的標(biāo)題就可以打開）
進(jìn)入SVG編輯器
通過135編輯器左側(cè)入口進(jìn)入svg編輯器；
或者直接在瀏覽器輸入svg編輯器網(wǎng)址進(jìn)入：
http://qwer.com.cn/svgeditor/
添加音頻海報(bào)組件
在【效果中心-音頻】分類下，找到【音頻海報(bào)（寬屏/窄屏）】組件或者搜索ID：41、42，點(diǎn)擊將組件添加到編輯區(qū)域
上傳圖片、音頻
在封面圖的位置，點(diǎn)擊【添加圖片】，上傳我們準(zhǔn)備好的圖片；
在音頻代碼的位置，點(diǎn)擊【一鍵獲取代碼】，將我們?cè)诘谝徊綔?zhǔn)備工作中復(fù)制來的帶有音頻的文章預(yù)覽鏈接，粘貼到輸入欄中；
音頻獲取完成后，點(diǎn)擊【立即使用】即可。（注意，配置完所有圖片和音頻素材之后，中間編輯區(qū)域的組件才會(huì)正常顯示）
點(diǎn)擊紅色的方塊，可以設(shè)置觸發(fā)熱區(qū)的大小和區(qū)域。熱區(qū)就是點(diǎn)擊觸發(fā)音頻播放的區(qū)域，在熱區(qū)外點(diǎn)擊圖片是不會(huì)播放的。
由于音頻素材的特殊性，預(yù)覽時(shí)無法查看素材效果，需要保存到微信后臺(tái)預(yù)覽真實(shí)效果。
導(dǎo)出/同步到微信
制作好的音頻海報(bào)，可以通過導(dǎo)出/同步兩種方式，保存到微信公眾號(hào)。具體操作根據(jù)系統(tǒng)提示完成即可。
以上就是制作一個(gè)點(diǎn)擊圖片，播放聲音的完整操作教程了。在SVG編輯器中，這種音頻海報(bào)的效果延伸出了更多的玩法，比如和點(diǎn)擊換圖、點(diǎn)擊展開等其他效果進(jìn)行組合：
點(diǎn)擊換圖展開同時(shí)播放音頻-自定義觸發(fā)
點(diǎn)擊展開同時(shí)播放音頻-自定義觸發(fā)
點(diǎn)擊換圖式音頻海報(bào)-防誤觸（gif圖）
玩法多多，大家可以盡情發(fā)揮創(chuàng)意，趕快去試試吧！
·END·
文章排版由135編輯器提供技術(shù)支持
■ ■ ■ ■
立即登錄
- 雙十二電商活動(dòng)宣傳排版素材（電商商品促銷推廣模版樣式）
- 乞巧節(jié)微信公眾號(hào)推文排版素材（愛情浪漫活動(dòng)推廣文案）
- 二十四節(jié)氣立秋圖文排版素材（金黃色系立秋推文文案模版）
- 八一建軍節(jié)紀(jì)念日推文排版樣式（光輝歷程文案宣傳模版）
