EAUML日拱一卒-微信小程序实战：位置闹铃 (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

写在文章的最后

既然已经读到这里了，拜托大家再用一分钟时间，将文章转发到各位的朋友圈，微信群中。本公众号的成长需要您的支持！

以上就是今天的文章，欢迎点赞并推荐给您的朋友！

更新文章，请扫描下面二维码，关注微信公众号【面向对象思考】

EAUML日拱一卒-微信小程序实战：位置闹铃 (12)-这还不算完相关推荐

EAUML日拱一卒-微信小程序实战：位置闹铃 (5)-显示所在位置的信息
假设我们指定了多个监控点,接下来的需求就是给每个监控点取名字.如果是手动输入的话,会比较麻烦.所以位置闹铃再向前走一步,从地图上取得监控点所在位置的信息作为监控点的名称. 画面说明当我们选定监控点以 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (18)-差不多就这样了
经过一段时间地实现和测试,位置闹铃小程序开发也渐渐接近尾声了.作为一个练习,差不多也就这样了. 今天介绍小程序的功能. 启动小程序扫描下面的二维码即可启动位置闹铃小程序. 功能介绍首先是主画面,第 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (15)-实现监控点状态迁移功能
简单地设计以后,就可以开始着手实现了. 接近监控点 enterAlarmCheck: function (distance, accuracy){ if (this.state == 'ready') ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (19)-发布微信小程序
小程序的功能实现之后,经过一段时间地测试,接下来就是发布了. 在开发工具的上面偏右的位置,有一个[上传]按钮,按下它就可以将小程序上传到微信小程序公众号. 登录自己的小程序帐号,进入开发管理页面. 画 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (17)-保存和取出设定信息
设定了监控点之后,小程序会取得最新位置,判断各个监控点的到达,离开情况并播放提示音.很多情况下,用户会希望这些信息可以保存起来以便将来使用. 这就是今天的主题:在小程序中保存设定信息. API 位置闹 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (16)-单元测试是个技术活
程序设计,实现之后的下一个环节就是单元测试了.对于位置闹铃小程序来讲,带着设备到处移动以测试监控点的状态迁移就是一个必经之路,但是如果所有环节都通过实地测试来解决,那将耗费大量的时间和体力. 我们的选 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (8)-WXML条件渲染
需求按照位置闹铃程序的设计,当设备接近或者离开某个区域时,可以播放提示音,也可触发记时器动作.按照设计,我们的画面是这样的. 提示音选择画面计时器选择画面实现方式一般来讲,根据动作动作类型选择 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (6)-播放音频
昨天停更了一天,不是作者偷懒,而是掉到了一个坑里.本来以为播放音频很简单,但是还是遇到的各种问题,比如: 1)小程序无法播放手机存储目录中的文件,只能播放网上的或者是小程序暂存的文件. 2)播放暂存文 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (20)-发布微信小程序(续)
头一天晚上申请,到第二天早上也没有通过,所以就有了这篇续. 审批通过以后,首先手机的服务通知收到这个: 登录小程序帐号,画面的右上角也会有提示. 这时的开发管理页面是这样的: 可以看到审核版本栏版本号 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (14)-分析监控点状态
将监控点包装成一个类以后,接下来应该就是设计和实现监控点功能了.今天先是设计.我们分接近监控点和离开监控点两种情况讨论. 接近监控点 ready状态监控点工作状态,小程序会对设备位置进行监控,如果有 ...

EAUML日拱一卒-微信小程序实战：位置闹铃 (12)-这还不算完

EAUML日拱一卒-微信小程序实战：位置闹铃 (12)-这还不算完相关推荐

最新文章

热门文章