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