当前位置: 欧洲杯竞猜 > 服务器运维 > 正文

Wechat小程序音乐播放器开垦_javascript技能_脚本之

时间:2019-12-21 21:46来源:服务器运维
前言 最近看到有一个叫做“轻客小伙伴”的微信服务号,运营得挺不错的。它是做英语线上培训的,由老师录制语音,配上图文,制作成课程。 这篇文章上一版本是用audio组件开发的播

前言

最近看到有一个叫做“轻客小伙伴”的微信服务号,运营得挺不错的。 它是做英语线上培训的,由老师录制语音,配上图文,制作成课程。

这篇文章上一版本是用audio组件开发的播放器,随后反应音频加载速度慢的问题

花了不少时间写了大多数功能,但还没有优化成插件,直接发代码估计也看不懂,难应用。所以就主要说下实现的思路。 我的html结构是这样的

又用小程序内置的背景音乐播放的方法写了一遍,逻辑是一样的逻辑,希望对大家有所帮助!

1'6"Your browser does not support the audio tag.
           {{starttime}}  {{duration}}   

核心功能就是语音播放,主要包括了以下几个功能点:

js部分注意了:bug ios 播放时必须加title 不然会报错导致音乐不播放

红点表明未听语音,语音听过后,红点会消失;

//index.js//获取应用实例const bgMusic = wx.getBackgroundAudioManager Page({ data: { isOpen: false,//播放开关 starttime: '00:00', //正在播放时长 duration: '06:41', //总时长 src:"http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46" }, // 播放 listenerButtonPlay: function () { var that = this //bug ios 播放时必须加title 不然会报错导致音乐不播放 bgMusic.title = '此时此刻' bgMusic.epname = '此时此刻' bgMusic.src = that.data.src; bgMusic.onTimeUpdate => { //bgMusic.duration总时长 bgMusic.currentTime当前进度 console.log var duration = bgMusic.duration; var offset = bgMusic.currentTime; var currentTime = parseInt; var min = "0"   parseInt; var max = parseInt; var sec = currentTime % 60; if  { sec = "0"   sec; }; var starttime = min   ':'   sec; /* 00:00 */ that.setData({ offset: currentTime, starttime: starttime, max: max, changePlay: true }) }) //播放结束 bgMusic.onEnded => { that.setData({ starttime: '00:00', isOpen: false, offset: 0 }) console.log bgMusic.play(); that.setData }, //暂停播放 listenerButtonPause(){ var that = this bgMusic.pause() that.setData }, listenerButtonStop(){ var that = this bgMusic.stop() }, // 进度条拖拽 sliderChange { var that = this var offset = parseInt; bgMusic.play(); bgMusic.seek; that.setData }, // 页面卸载时停止播放 onUnload() { var that = this that.listenerButtonStop()//停止播放 console.log

/**index.wxss**/.audiosBox{ width: 92%; margin: auto; height: 130rpx; display: flex; justify-content: space-between; align-items: center; background: #f6f7f7; border-radius: 10rpx;}/*按钮大小 */.audioOpen{ width: 70rpx; height: 70rpx; border: 2rpx solid #4c9dee; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 20rpx;} image{ width: 30rpx; height: 40rpx;}.image2{ margin-left: 10%;}/*进度条长度 */.slid{ flex: 1; position: relative;}.slid view{ display: flex; justify-content: space-between;}.slid view>text:nth-child{ color: #4c9dee; margin-left:6rpx; }.slid view>text:nth-child{ margin-right:6rpx; }slider{ width: 520rpx; margin: 0; margin-left: 35rpx;}/*横向布局 */.times{ width: 100rpx; text-align: center; display: inline-block; font-size: 24rpx; color:#999999; margin-top: 5rpx;}.title view{ text-indent: 2em; }

将“未读”状态的样式独立出来,“已读”的时候,把样式删除就行。结合本地存储处理就搞定了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

//this是点击的语音的documentvar app_voice_time = this.getElementsByClassName[0]; if(app_voice_time.className.indexOf != -1){ //存在红点时,把红点样式删除 app_voice_time.className = app_voice_time.className.replace("app-voice-unread",""); }

第一次听语音,会自动播放下一段语音;

这里主要是使用HTML5的audio控件的“语音播放完”事件 语音播放完,找到下一个语音,播放下一个语音

//语音播放完事件(PAGE.audio是audio控件的document) PAGE.audio.addEventListener { //循环获取下一个节点 PAGE.preVoice = PAGE.currentVoice; var currentVoice = PAGE.currentVoice; while{ currentVoice = currentVoice.nextElementSibling;//下一个兄弟节点 //已经到达最底部 if{ PAGE.preVoice.getElementsByClassName[0].className = "app-voice-state app-voice-pause"; return false; } var voiceSrc = currentVoice.getAttribute; if(voiceSrc && voiceSrc != ""){ break; } } if{ PAGE.preVoice.getElementsByClassName[0].className = "app-voice-state app-voice-pause"; return false; } PAGE.currentVoice = currentVoice; //获取得到下一个语音节点,播放 PAGE.audio.src = voiceSrc; PAGE.audio.play(); PAGE.Event_PlayVoice;

每段语音可以暂停、继续播放、重新播放;

这个比较简单,但是也是比较多逻辑。需要变换样式告诉用户,怎样是继续播放/重新播放。

播放中的语音有动画,不是播放中的语音则会停止动画。

这里主要是CSS3动画的应用

.app-voice-pause,.app-voice-play{ height: 18px; background-repeat: no-repeat; background-image: url; background-size: 18px auto; opacity: 0.5;} .app-voice-you .app-voice-pause{ /*从未播放*/ background-position: 0px -39px;}.app-voice-you .app-voice-play{ /*播放中*/ background-position: 0px -39px; -webkit-animation: voiceplay 1s infinite step-start; -moz-animation: voiceplay 1s infinite step-start; -o-animation: voiceplay 1s infinite step-start; animation: voiceplay 1s infinite step-start;}@-webkit-keyframes voiceplay { 0%, 100% { background-position: 0px -39px; } 33.333333% { background-position: 0px -0px; } 66.666666% { background-position: 0px -19.7px; }}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

编辑:服务器运维 本文来源:Wechat小程序音乐播放器开垦_javascript技能_脚本之

关键词: 欧洲杯竞猜