EA&UML日拱一卒-微信小程序實戰：位置鬧鈴 (12)-這還不算完
因爲重構代碼，多花了一點時間，久等了。。
上一篇文章實現了音頻文件緩存功能，做到了一次下載多次播放。但是還有一個問題：這個功能是作爲app的一個功能而存在，如果想在其他場合使用就必須是代碼層次的拷貝和粘貼。不好。
我們繼續改進，將這部分功能做成一個通用，獨立模塊。
voiceplay.js
//voice player
function prepare(){
var that = this
var info_pair = wx.getStorageSync('url2FileMap') || [];
this.urlMap = new Map();
info_pair.forEach(function(pair){
that.urlMap.set(pair.url, pair.file);
});
}
function saveMap(){
var info_pair = []
this.urlMap.forEach(function(file, url, map){
info_pair.push({url:url, file:file})
});
wx.setStorageSync('url2FileMap', info_pair);
}
//播放鈴聲文件，優先使用緩存文件，根據需要下載。
//var url = that.getRingtoneUrl(index)
function play(url) {
const app = getApp()
var that = this
var savedFile = this.urlMap.get(url)
if (savedFile != undefined) {
//已經存在緩存文件，直接播放緩存文件
app.addLog('播放緩存鈴聲')
wx.playVoice({
filePath: savedFile,
fail: function () {
//播放緩存文件失敗，清除緩存文件信息
that.urlMap.delete(url);
that.saveMap();
//下載並播放緩存文件
that.downloadAndPlay(url)
},
})
} else {
//沒有緩存文件，下載並播放
app.addLog('that.downloadAndPlay')
that.downloadAndPlay(url)
}
}
//下載，保存，播放鈴聲文件。
function downloadAndPlay(url) {
const app = getApp()
var that = this
that.downloadFile({
url: url,
success: function (savedFilePath) {
app.addLog('saveFileSuccess')
//下載成功，播放文件
app.addLog('播放下載鈴聲')
wx.playVoice({
filePath: savedFilePath,
})
//更新緩存文件信息。
that.urlMap.set(url,savedFilePath);
that.saveMap();
}
})
}
//下載並保存文件
function downloadFile(parameter) {
const app = getApp()
var that = this
wx.downloadFile({
url: parameter.url,
success: function (res) {
//保存臨時文件，以供將來使用
wx.saveFile({
tempFilePath: res.tempFilePath,
success: function (save_res) {
parameter.success(save_res.savedFilePath)
}
})
},
})
}
module.exports = {
prepare: prepare,
play: play,
downloadAndPlay:downloadAndPlay,
downloadFile:downloadFile,
saveMap:saveMap
}
用法
經過上述處理，我們就得到了一個通用的音頻播放模塊，可以在直接在其他小程序中使用。一共分三步，每步就一行。
導入模塊
const voiceplayer = require('./utils/voiceplayer.js')
目錄有可能需要根據目錄結構修改。
初始化
voiceplayer.prepare()
調用prepare函數，取得已經保存的緩存文件信息。
播放音頻
voiceplayer.play(media_file_url)
調用play函數，播放指定的音頻文件。如果沒有緩存文件則首先下載該文件播放並保存以供下次使用。音頻文件需要另外準備。
代碼下載鏈接
voiceplayer.js
https://raw.githubusercontent.com/xueweiguo/alarmmap/master/utils/voiceplayer.js
寫在文章的最後
