摘要:引言是微信小程序中的音頻組件,可以輕松實(shí)現(xiàn)小程序中播放停止音頻等自定義動(dòng)作。
引言: audio是微信小程序中的音頻組件,可以輕松實(shí)現(xiàn)小程序中播放/停止音頻等自定義動(dòng)作。
附上微信小程序audio組件的相關(guān)屬性說(shuō)明:
https://mp.weixin.qq.com/debu...
本次將通過(guò)小程序audio的 poster、name、author、src、id、controls 屬性,以及相關(guān)api:wx.createAudioContext 的使用,來(lái)制作一個(gè)簡(jiǎn)單的音頻播放控制頁(yè)面
步驟一
打開微信開發(fā)者工具,創(chuàng)建小程序項(xiàng)目,選擇新建的空白文件夾即可,工具為自動(dòng)為你生成小程序必要文件!接著在 pages 下創(chuàng)建一個(gè)文件夾命名 audio
步驟二
接著打開 app.json,如下圖添加 "pages/audio/audio", 寫入該頁(yè)面路徑,確保能夠訪問(wèn)。寫入之后,audio文件會(huì)生成js/json/wxml等空白配置文件
步驟三
直接貼出代碼了,audio.json 默認(rèn)即可
audio.js (audio腳本文件)
// audio.js Page({ data: { poster: "http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000", name: "此時(shí)此刻", author: "許巍", src: "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46", }, onReady: function (e) { // 使用 wx.createAudioContext 獲取 audio 上下文 context this.audioCtx = wx.createAudioContext("myAudio") }, audioPlay: function () { this.audioCtx.play() }, audioPause: function () { this.audioCtx.pause() }, audio14: function () { this.audioCtx.seek(14) }, audioStart: function () { this.audioCtx.seek(0) } })
audio.wxml(audio頁(yè)面結(jié)構(gòu)文件)
audio.wxss(audio頁(yè)面樣式文件)
/* pages/audio/aduio.wxss */ .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; }
微信小程序audio音頻播放組件的效果:
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/68461.html
摘要:?jiǎn)栴}微信小程序,將文字轉(zhuǎn)換為語(yǔ)音后,使用音頻進(jìn)行播放。在安卓手機(jī)下可以正常播放,在下不行。需要對(duì)接口的文本字符串參數(shù)進(jìn)行編碼比如哈哈哈哈哈哈哈哈哈沒(méi)有做編碼,直接上文本的,也會(huì)出現(xiàn)安卓行不行的情況。 【問(wèn)題】 微信小程序,將文字轉(zhuǎn)換為語(yǔ)音后,使用音頻進(jìn)行播放。在安卓手機(jī)下可以正常播放,在IOS下不行。 【環(huán)境】 微信小程序庫(kù)版本2.3.0百度語(yǔ)音合成服務(wù) 【解決方法】 正確代碼: //...
摘要:為了提高自己,最近在學(xué)習(xí)微信小程序,選題是仿網(wǎng)易云音樂(lè)。查文檔發(fā)現(xiàn),小程序中圖片加載完成后,有一個(gè)加載完成事件。前者在微信客戶端版本就不開始維護(hù)了,后者低版本需做兼容處理。目前還有一些功能暫未實(shí)現(xiàn),會(huì)在以后繼續(xù)完善項(xiàng)目,繼續(xù)學(xué)習(xí)。 為了提高自己,最近在學(xué)習(xí)微信小程序,選題是仿網(wǎng)易云音樂(lè)。期間踩過(guò)了大把的坑,bug出現(xiàn)的難受和解決bug歡喜,一直是伴隨我階段性學(xué)習(xí)這個(gè)項(xiàng)目的心情。初步完成...
摘要:小程序自定義組件開發(fā)規(guī)范一個(gè)小程序組件由個(gè)文件組成,分別是,本規(guī)范只關(guān)注組件的,其它自行查看官方文檔。的變量可以分為以下種類型組件外部通過(guò)組件屬性的方式傳入內(nèi)部的數(shù)據(jù)。 小程序自定義組件開發(fā)規(guī)范 ? 一個(gè)小程序組件由4個(gè)文件組成,分別是wxml、wxss、json、js,本規(guī)范只關(guān)注組件的js,其它自行查看官方文檔。 ? 在自定義組件的 js 文件中,需要使用 Compon...
摘要:項(xiàng)目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代碼,更多關(guān)于小程序的內(nèi)容可見微信小程序開發(fā)文檔小程序框架結(jié)構(gòu)微信小程序的入口是根目錄下的它們分別描述的小程序的主題邏輯和公共配置部分。 剛進(jìn)公司不久,因?yàn)楣静块T年后業(yè)務(wù)拓展的關(guān)系,可能在年后會(huì)被分配到公司的微信公眾號(hào)組做小程序相關(guān)的開發(fā)工作,因此寫了個(gè)微信小程序wx-audio踩坑。目前還有一些功能沒(méi)有寫完:如返...
閱讀 3350·2021-11-04 16:10
閱讀 3846·2021-09-29 09:43
閱讀 2692·2021-09-24 10:24
閱讀 3338·2021-09-01 10:46
閱讀 2503·2019-08-30 15:54
閱讀 585·2019-08-30 13:19
閱讀 3232·2019-08-29 17:19
閱讀 1049·2019-08-29 16:40