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