小程序音频播放带上下切换音频,带列表选择
微信小程序开发交流qq群 581478349
微信:
承接小程序开发
<view class=''>
<!-- 背景图片 -->
<image class='bg' src='http://img4.imgtn.bdimg.com/it/u=1866686759,3600446626&fm=214&gp=0.jpg' mode='aspectFill'></image>
</view>
<view class='item'>
<view class='toptext_bor'>
<view class='toptext1'>碎 片 时 间 . 听 见 未 来</view>
<!-- 动态展示标题 -->
<view class='toptext2'>{{title}}</view>
</view>
<!-- 旋转图片 -->
<image class='audio_post{{music_on?" music_on":""}}' style="animation-play-state:{{music_playing?'running':'paused'}}" src='{{img}}'></image>
</view>
<view class='bt_pos'>
<view class='audio_progress'>
<!-- 播放进度 -->
<view class='time'>{{starttime}}</view>
<!-- 进度条 -->
<slider block-size='14' bindchange="sliderChange" block-size="12px" step="2" value="{{offset}}" max="{{max}}" selected-color="#4c9dee"></slider>
<!-- 音频长度 -->
<view class='time1'>{{duration}}</view>
</view>
<view class='audio_control'>
<!-- 列表 -->
<image src='/img/list.png' class=' rt_img' bindtap='showModal'></image>
<!-- 上 -->
<image src='/img/shang.png' class=' anniu_img_sx ' bindtap='play_shang'></image>
<!-- 播放 -->
<image src='/img/bf.png' class='anniu_img anniu_img_sx' bindtap="listenerButtonPlay" wx:if="{{!isOpen}}"></image>
<!-- 暂停 -->
<image src='/img/zt.png' class='anniu_img anniu_img_sx ' bindtap="listenerButtonPause" wx:if="{{isOpen}}"></image>
<!-- 下 -->
<image src='/img/xia.png' class=' anniu_img_sx ' bindtap='play_xia'></image>
<!-- 转发 -->
<image src='/img/zf.png' class='rt_img' ></image>
</view>
</view>
<view style='display:{{show}}'>
<view class='show' bindtap='hide'></view>
<view class='show_bo' animation="{{animationData}}" wx:if="{{showModalStatus}}">
<scroll-view class='for_list' scroll-y='true'>
<block wx:for='{{title_list}}' wx:key=''>
<block wx:if="{{index == clickId}}">
<view class='bo_list_bot' catchtap='play_list' data-index='{{item.id}}' type='primary'>
<cover-image src='/img/tuwen.png' class='bt_show_img'></cover-image>
<cover-view>
<!-- 标题 -->
<cover-view class='bo_list_text' style="color:{{color}}" id="{{index}}" bindtap="play_list" data-data="{{item}}">{{item.title}}</cover-view>
<!-- 名字 日期 -->
<cover-view class='name_time' style="color:{{color}}" id="{{index}}" bindtap="play_list" data-data="{{item}}">{{item.name}} {{item.time}}</cover-view>
</cover-view>
<view style=' margin-top: 35rpx;'>
<icon type='success' size='20' color='#0b68f3' style=' display: {{display_rue}} '></icon>
</view>
</view>
</block>
<block wx:else>
<view class='bo_list_bot' bindtap='play_list' data-index='{{item.id}}' type='primary'>
<cover-image src='/img/tuwen.png' class='bt_show_img'></cover-image>
<cover-view>
<!-- 标题 -->
<cover-view class='bo_list_text' id="{{index}}" bindtap="play_list" data-data="{{item}}">{{item.title}}</cover-view>
<!-- 名字 日期 -->
<cover-view class='name_time' id="{{index}}" bindtap="play_list" data-data="{{item}}">{{item.name}} {{item.time}}</cover-view>
</cover-view>
</view>
</block>
</block>
</scroll-view>
<cover-view class='none' bindtap='hide'>取消</cover-view>
</view>
</view>
/* pages/dh/dh.wxss */
page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.toptext_bor {
color: #a5a5a5;
width: 100%;
font-size: 36rpx;
text-align: center;
}
.toptext2 {
color: #fff;
font-size: 46rpx;
margin: 50rpx 60rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bg {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(10px);
transform: scale(1.1);
z-index: -1;
}
.item {
z-index: 10;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 50rpx;
}
.item text {
font-size: medium;
}
.bt_pos {
position: absolute;
bottom: 40rpx;
}
.audio_progress {
padding-bottom: 30rpx;
width: 100vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.audio_progress slider {
width: 430rpx;
}
.audio_progress view {
padding: 18rpx;
}
.time {
color: #fff;
font-size: 26rpx;
width: 40rpx;
margin-top: 10rpx;
}
.time1 {
color: #fff;
font-size: 26rpx;
width: 40rpx;
margin-top: 10rpx;
margin-left: -60rpx;
}
.audio_post {
width: 300rpx;
height: 300rpx;
margin: 100rpx auto;
border-radius: 50%;
}
/* 旋转的样式 */
.music_on {
animation: audio-rotate 8s linear infinite;
}
.audio_control {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.audio_control button {
width: 200rpx;
height: 80rpx;
line-height: 80rpx;
}
/* 旋转动画 */
@keyframes audio-rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.anniu_img {
width: 100rpx;
height: 100rpx;
}
.anniu_img_sx {
width: 70rpx;
height: 70rpx;
margin-top: 10rpx;
}
.rt_po_ab {
position: absolute;
bottom: 280rpx;
right: 20rpx;
width: 80rpx;
text-align: center;
color: #fff;
font-size: 28rpx;
}
.rt_img {
width: 50rpx;
height: 50rpx;
margin-top: 20rpx;
}
.show {
background: rgba(2, 2, 2, 0.603);
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
right: 0rpx;
left: 0rpx;
bottom: 0rpx;
z-index: 500rpx;
}
.bt_bo_pos {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
}
.show_bo {
background: #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
height: 800rpx;
padding: 50rpx 20rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
/* //影藏滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.none {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
color: #0b68f3;
margin-top: 120rpx;
line-height: 80rpx;
font-size: 28rpx;
}
.bt_show_img {
width: 30rpx;
height: 30rpx;
padding: 5rpx 10rpx;
background: rgb(231, 230, 230);
margin-top: 35rpx;
}
.bo_list_bot {
display: flex;
flex-direction: row;
/* padding: 30rpx 10rpx; */
font-size: 26rpx;
border-bottom: 1rpx solid rgb(223, 223, 223);
}
.for_list {
height: 780rpx;
}
.bo_list_text {
margin-left: 10rpx;
width: 600rpx;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
line-height: 100rpx;
}
.name_time{
margin-top: -20rpx;
color: #aaa8a8;
font-size: 24rpx;
margin-left: 60rpx;
padding-bottom: 20rpx;
}
//index.js
//获取应用实例
const bgMusic = wx.createInnerAudioContext()
const app = getApp()
//动画
var audioAnimation;
Page({
data: {
index: '2',
title_list: [{
name: 'Anmber',
time: '2019-1-1',
title: '元宝妈妈:拇指姑娘',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
id: 0,
img: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
}, {
name: 'Anmber',
time: '2019-1-1',
src: 'http://www.ytmp3.cn/down/56773.mp3',
title: '元宝妈妈:《格林童话》拇指姑娘',
img: '../../img/Rotation_chart.jpg',
id: 1
}, {
name: 'Anmber',
time: '2019-1-1',
src: 'http://www.ytmp3.cn/down/56778.mp3',
title: '《格林童话》 元宝妈妈:《格林童话》拇指姑娘元宝妈妈:《格林童话》拇指姑娘',
img: '../../img/x.jpg',
id: 2
}, {
name: 'Anmber',
time: '2019-1-1',
src: 'http://www.ytmp3.cn/down/32476.mp3',
title: '拇指姑娘',
img: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
id: 3
}, {
name: 'Anmber',
time: '2019-1-1',
src: 'http://www.ytmp3.cn/down/56778.mp3',
title: '元宝妈妈',
img: '../../img/Rotation_chart.jpg',
id: 4
}, {
name: 'Anmber',
time: '2019-1-1',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
title: '元宝妈妈拇指姑娘',
img: '../../img/x.jpg',
id: 5
}, {
name: 'Anmber',
time: '2019-1-1',
src: 'http://www.ytmp3.cn/down/56778.mp3',
title: '《格林童话》拇指姑娘',
img: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
id: 6
}, {
name: 'Anmber',
time: '2019-1-1',
src: 'http://www.ytmp3.cn/down/32476.mp3',
title: '元宝妈妈:《格林童话》拇指姑娘',
img: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
id: 7
}, ],
// 默认动态高度
heighTrue: true,
// 底部弹窗动画
showModalStatus: false,
//列表弹窗显隐
show: 'none',
//播放开关
isOpen: false,
//正在播放时长
starttime: '00:00',
//总时长
duration: '00:00',
//音乐是不是在播放
music_on: true,
//显示的时间
music_playing: false,
},
onLoad: function() {
var that = this
// 获取应的音频
that.s_p()
},
//上
play_shang: function() {
var that = this
var id = parseInt(this.data.index)
var num = id - 1
if (id - 1 < 0) {
wx.showToast({
title: '已是第一个',
})
} else {
this.setData({
music_on: false,
index: num,
'color': '#0b68f3',
'clickId': num,
src: '',
duration: '',
})
that.s_p()
}
},
// 下
play_xia: function() {
// console.log(this.data.title_list)
var that = this
var id = parseInt(this.data.index)
var num = id + 1
if (id + 1 > this.data.title_list.length - 1) {
wx.showToast({
title: '已是最后一个',
})
} else {
this.setData({
music_on: false,
index: num,
'color': '#0b68f3',
'clickId': num,
src: '',
duration: '',
})
that.s_p()
}
},
// 视频获取
s_p: function() {
var that = this
//(src音频名字)
var src = this.data.title_list[this.data.index].src
//(图片音频名字)
var img = this.data.title_list[this.data.index].img
//(标题音频名字)
var title = this.data.title_list[this.data.index].title
this.setData({
'color': '#0b68f3',
'clickId': this.data.index,
src: src,
img: img,
title: title
})
that.listenerButtonPlay()
},
// 点击列表切换
play_list: function(e) {
// console.log(e)
var that = this
var id = e.target.id
that.setData({
'color': '#0b68f3',
'clickId': id,
index: id,
display_rue: 'block',
});
if (this.data.src == '') {
that.s_p()
that.setData({
'color': '#0b68f3',
'clickId': id,
index: id,
display_rue: 'block',
});
} else {
that.listenerButtonPlay()
that.setData({
'color': '#0b68f3',
'clickId': id,
index: id,
display_rue: 'block',
src: ''
});
}
},
//弹窗显示
showModal: function() {
var that = this
this.setData({
show: 'block'
})
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true,
heighTrue: false,
ball_height: 1,
show: 'block'
})
setTimeout(function() {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 200)
},
//隐藏
hide: function() {
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function() {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false,
heighTrue: true,
ball_height: 2,
show: 'none',
})
}.bind(this), 200)
},
// 播放
listenerButtonPlay: function(e) {
var that = this
//bug ios 播放时必须加title 不然会报错导致音乐不播放
// console.log(this.data.index)
var sec = this.data.src
bgMusic.title = '此时此刻'
bgMusic.epname = '此时此刻'
bgMusic.src = that.data.src;
this.data.music_on = true;
this.data.music_playing = true;
bgMusic.play(); //图片添加css样式,旋转样式
this.setData({
music_on: true,
music_playing: this.data.music_playing,
})
bgMusic.onTimeUpdate(() => {
//bgMusic.duration总时长 bgMusic.currentTime当前进度
// console.log(bgMusic.currentTime)
var duration = bgMusic.duration;
var offset = bgMusic.currentTime;
var currentTime = parseInt(bgMusic.currentTime);
var min = "0" + parseInt(currentTime / 60);
var max = parseInt(bgMusic.duration);
var sec = currentTime % 60;
var maxtime = max / 60
var max_time = parseInt(maxtime);
var x_maxtime = maxtime - max_time;
var yu_time = parseInt(x_maxtime * 60)
if (sec < 10) {
sec = "0" + sec;
};
var starttime = min + ':' + sec; /* 00:00 */
var time_time = max_time + ':' + yu_time
that.setData({
isOpen: true,
duration: time_time,
offset: currentTime,
starttime: starttime,
max: max,
changePlay: true,
})
})
// 播放出错
bgMusic.onError((res) => {
that.prompt.message('网络出错,稍后再试')
})
// 播放结束
bgMusic.onEnded((res) => {
// console.log('录音播放结束');
var that = this
var id = parseInt(this.data.index)
var num = id + 1
if (id + 1 > this.data.title_list.length - 1) {
wx.showToast({
title: '已是最后一个',
})
} else {
this.setData({
music_on: false,
index: num,
'color': '#0b68f3',
'clickId': num,
src: '',
duration: '',
})
that.s_p()
}
})
},
//暂停播放
listenerButtonPause() {
this.data.music_on = true;
this.data.music_playing = false;
var that = this
bgMusic.pause()
that.setData({
isOpen: false,
music_on: this.data.music_on,
music_playing: this.data.music_playing,
})
},
// 进度条拖拽
sliderChange(e) {
var that = this
var offset = parseInt(e.detail.value);
bgMusic.play();
bgMusic.seek(offset);
that.setData({
isOpen: true,
})
},
// 页面卸载时停止播放
// onUnload() {
// var that = this
// that.listenerButtonStop() //停止播放
// console.log("离开")
// },
})