小程序自定义音频组件,带滚动条

摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的

而微信小程序API给我们提供的就是这样的

而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 audio 组件,即使官方推荐更强大的  wx.createInnerAudioContext 但是不符合需求,所以这里用到的是 backgroundAudioManager()

https://developers.weixin.qq.com/miniprogram/dev/api/getBackgroundAudioManager.html

分析一下:这个页面构成,主要就是进度条和一些icon,进度条之前我自定义了一版,但是效果不理想,最后重构了页面,所以这里用的就是 slider 滑动选择器 https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

  • audio.wxml
<view class="audio">
<image class="bg" src="{{audio_article.lessonImg}}"></image>
<image mode="aspectFill" class="poster" src="{{audio_article.lessonImg}}"></image>
<view class="control-process">
<text class="current-process">{{current_process}}</text>
<slider class="slider"
bindchange="hanle_slider_change"
bindtouchstart="handle_slider_move_start"
bindtouchend="handle_slider_move_end"
min="0"
block-size="16"
max="{{slider_max}}"
activeColor="#fff"
backgroundColor="rgba(255,255,255,.3)"
value="{{slider_value}}"
/>
<text class="total-process">{{total_process}}</text>
</view>
<view class="icon-list ">
<image bindtap="prev" mode="widthFix" src="{{is_first_page?'/images/audio_prev_no.png':'/images/audio_prev.png'}}" class="audio-icon"></image>
<image mode="widthFix" src="{{is_play? '/images/audio_play.png': '/images/audio_paused.png'}}" class="audio-icon audio-play" bindtap="audio_play"></image>
<image bindtap="next" mode="widthFix" src="{{is_last_page?'/images/audio_next_no.png':'/images/audio_next.png'}}" class="audio-icon"></image>
<image hidden mode="widthFix" class="pattern" src="{{is_loop ? '/images/audio_loop.png': '/images/audio_un_loop.png'}}" bindtap="play_loop"></image>
</view>
</view>
滑动事件 bindchange="hanle_slider_change"
开始滑动 bindtouchstart="handle_slider_move_start"
停止滑动 bindtouchend="handle_slider_move_end"
  • audio.wxss

.audio {
position: relative;
width: 750rpx;
height: 640rpx;
padding: 60rpx 32rpx 52rpx;
box-sizing: border-box;
text-align: center;
overflow: hidden;
background: rgba(0,0,0,.18);
} .audio .bg {
position: absolute;
top: 0;
left: -100%;
bottom: 0;
right: 0;
margin: auto;
width: 300%;
height: 300%;
z-index: -1;
filter: blur(40rpx); }
.editor {
padding: 32rpx;
box-sizing: border-box;
color: #333;
font-size: 28rpx;
background: #fff;
}
.editor view {
max-width: 100% !important;
} .audio .poster {
width: 238rpx;
height: 336rpx;
}
/* 音频滚动条start */
.control-process {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.control-process .slider {
width: 526rpx;
}
.control-process text {
font-size: 24rpx;
color: #fff;
}
/* 音频滚动条end */
.audio .icon-list {
position: relative;
margin: 0 auto;
line-height: 102rpx;
} .audio .icon-list .audio-icon + .audio-icon {
margin-left: 72rpx;
} .audio .icon-list .pattern {
position: absolute;
right: 20rpx;
} .audio image {
width: 64rpx;
height: 64rpx;
vertical-align: middle;
} .audio .audio-play {
width: 92rpx;
height: 92rpx;
} .audio .pattern {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
width: 44rpx;
height: 44rpx;
} /* 音频end */
  • audio.js
/**
* @author: 清风白水 https://www.cnblogs.com/luxiaoyao/
* @date: 2018/07/20 14:36:00
* @program: 重构音频页面
*/
const APP = getApp()
const AUDIOMANAGER = getApp().globalData.global_bac_audio_manager.manage
const AUDIO = getApp().globalData.global_bac_audio_manager
Page({
onLoad: function (e) {
let that = this,
request_param = {
articleId: e.articleId
} this.setData({
article_id: e.articleId
}) wx.request({
url: 'your url',
method: 'POST',
data: {},
header: {
'Content-Type': 'application/json;text/html;charset=utf-8;'
},
success: (res) => {
if (res.data.code == 'A00000') {
AUDIOMANAGER.onPlay(() => {
setTimeout(() => {
that.setData({
is_loading: true
})
}, 300)
}) let response = res.data.data.information // 如果不是从悬浮按钮播放,就重新赋值
if (e.articleId == AUDIO.id && AUDIO.is_play) {
wx.seekBackgroundAudio({
position: Math.floor(AUDIO.time)
})
} else {
audio_background_play(response)
} // 置灰上一首下一首
if (response.preArticleId == 0) {
that.setData({
is_first_page: true
})
}
if (response.nextArticleId == 0) {
that.setData({
is_last_page: true
})
}
}
}
}) //背景音频播放进度更新事件
AUDIOMANAGER.onTimeUpdate(() => {
if (!that.data.is_moving_slider) {
that.setData({
current_process: format(AUDIOMANAGER.currentTime),
slider_value: Math.floor(AUDIOMANAGER.currentTime),
total_process: format(AUDIOMANAGER.duration),
slider_max: Math.floor(AUDIOMANAGER.duration)
})
}
AUDIO.time = AUDIOMANAGER.currentTime
}) // 背景音频播放完毕
AUDIOMANAGER.onEnded(() => {
if (!that.data.is_loop) {
that.next()
} else {
// 单曲循环
that.setData({
slider_value: 0,
current_process: '00:00',
})
audio_background_play(response)
}
})
},
// 拖动进度条,到指定位置
hanle_slider_change(e) {
const position = e.detail.value
this.seekCurrentAudio(position)
},
// 拖动进度条控件
seekCurrentAudio(position) {
// 更新进度条
let that = this wx.seekBackgroundAudio({
position: Math.floor(position),
success: function () {
AUDIOMANAGER.currentTime = position
that.setData({
current_process: format(position),
slider_value: Math.floor(position)
})
}
})
},
// 进度条滑动
handle_slider_move_start() {
this.setData({
is_moving_slider: true
});
},
handle_slider_move_end() {
this.setData({
is_moving_slider: false
});
},
// 点击播放暂停
audio_play: function () {
let that = this if (this.data.is_play) {
that.setData({
is_play: false
})
wx.pauseBackgroundAudio()
} else if (!this.data.is_play && this.data.is_ended) { // 这里是判断如果循环播放结束,没有下一首,重新播放 is_ended 是否是最后一首
audio_background_play(that.data.audio_article)
that.setData({
is_play: true,
is_ended: false
})
} else if(!this.data.is_play){
that.setData({
is_play: true
})
wx.playBackgroundAudio()
}
AUDIO.is_play = !AUDIO.is_play
},
// 点击是否循环
play_loop: function () {
let that = this if (this.data.is_loop) {
that.setData({
is_loop: false
})
} else {
that.setData({
is_loop: true
})
}
}, // 上一首
prev: function () {
let that = this if (that.data.audio_article.preArticleId != 0) {
wx.redirectTo({
url: '/pages/audio_article/audio_article?articleId=' +
that.data.audio_article.preArticleId
})
}
},
// 下一首
next: function () {
let that = this if (that.data.audio_article.nextArticleId != 0) {
wx.redirectTo({
url: '/pages/audio_article/audio_article?articleId=' +
that.data.audio_article.nextArticleId
})
} else { // 如果是最后一首
that.setData({
is_play: false,
slider_value: 0,
current_process: '00:00',
is_ended: true
})
AUDIO.is_play = false
}
},
onUnload: function () {
// 动态切换悬浮按钮的动态
if (AUDIO.is_play) {
APP.globalData.is_active = true
} else {
APP.globalData.is_active = false
}
}
})
// 时间格式化
function format(t) {
let time = Math.floor(t / 60) >= 10 ? Math.floor(t / 60) : '0' + Math.floor(t / 60) t = time + ':' + ((t % 60) / 100).toFixed(2).slice(-2)
return t
}
// 音频播放
function audio_background_play(response) {
AUDIOMANAGER.src = response.urlCompressed ? response.urlCompressed : response.audioLink // 音频的数据源,默认为空字符串,当设置了新的 src 时,会自动开始播放 ,目前支持的格式有 m4a, aac, mp3, wav
AUDIOMANAGER.title = response.articleName // 音频标题
AUDIOMANAGER.epname = response.lessonName // 专辑名
AUDIOMANAGER.singer = '****' // 歌手名
AUDIOMANAGER.coverImgUrl = response.poster // 封面图url
}
  • app.js
  globalData: {
userInfo: null,
global_bac_audio_manager: {
manage: wx.getBackgroundAudioManager(),
is_play: false,
id: '',
play_time: '',
article_id: '',
}
}

总结: 在IOS端 背景音频播放必须设置title 才可以播放

微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放的更多相关文章

  1. 微信小程序的 音频 组件

    audio:音频组件, api 接口为 wx.createInnerAudioContext audio 组件的属性: id:类型 字符串 audio 组件的唯一标识 src:类型 字符串 要播放音频 ...

  2. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  3. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  4. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  5. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  6. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  7. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  8. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  9. 微信小程序校历组件

    微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧

  10. 微信小程序内置组件web-view的缓存问题探讨

    前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...

随机推荐

  1. js 奇葩技巧之隐藏代码

    昨天在群看到有人发了个文章叫<“短”化你的代码>,思路非常不错,采用unicode的零宽字符来实现字符隐藏,虽然有字符,可是你却看不见它.这篇文章详细的介绍了这种方法的实现原理,最后还给出 ...

  2. 【BZOJ】2111: [ZJOI2010]Perm 排列计数 计数DP+排列组合+lucas

    [题目]BZOJ 2111 [题意]求有多少1~n的排列,满足\(A_i>A_{\frac{i}{2}}\),输出对p取模的结果.\(n \leq 10^6,p \leq 10^9\),p是素数 ...

  3. Guava BiMap

    BiMap主要的就是用于key,value的互相映射,获取相互的结果,还保证值value是唯一的,key相同覆盖原来值. 举例: BiMap<Integer, String> empIDN ...

  4. 关于mysql-connector-java(JDBC驱动)的一些坑

    最近在写一个项目的时候,用了maven仓库里面较新的mysql的JDBC驱动,版本是6.0.6,Mybatis的全局配置是这么写的: <?xml version='1.0' encoding=' ...

  5. ipython的%matplotlib inline如何改写在Python

    ipython notebook中有一个相当方便的语句: %matplotlib inline,可以实现运行cell即出现结果图像.但是如果想写在Python程序内,貌似直接%matplotlib i ...

  6. Twisted框架

    Twisted是一个事件驱动型的网络模型.时间驱动模型编程是一种范式,这里程序的执行流由外部决定.特点是:包含一个事件循环,当外部事件发生时,使用回调机制来触发相应的处理. 线程模式: 1.单线程同步 ...

  7. 【C++】wchar、char格式化符输出

    VC.BCB.MinGW Linux下的GCC.C99标准 printf wprintf printf wprintf s char wchar_t char S wchar_t char * hs ...

  8. pop3设置

  9. CSS font-family 字体介绍,\5b8b\4f53 表示“宋体”

    font-family采用一种"回退"的形式来保存字体,可以写若干种字体.当第一种字体浏览器不支持的时候,会找第二种字体,一次类推. font-family字体分为两类: 特殊字体 ...

  10. Java编程的逻辑 (34) - 随机

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...