微信小程序之——音频播放
audio
官方 1.6.0 版本开始,该组件不再维护
实现的示例 官网 有详细的文档介绍
getBackgroundAudioManager
wx.getBackgroundAudioManager()
获取全局唯一的背景音频管理器。
小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。
wxml
<view class="container"> <view class='background'> <view class='info'> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">{{audioList[audioIndex].name||""}}</view> <!-- <view>{{audioList[audioIndex].author||""}}</view> --> </view> <view class='progress'> <text class="text1">{{progressText}}/{{durationText}}</text> <slider class='bar' bindchange="sliderChange" bindchanging="sliderChanging" value="{{progress}}" step="1" min='0' max='{{duration}}' activeColor="#cf0103" block-size="4" block-color="#c1c2c3" /> </view> <view class='buttons'> <image class='button' bindtap='playOrpause' src='{{playStatus?"/images/pause.png":"/images/play.png"}}'></image> </view> </view> </view>
js中 import 导入的data是数据
格式如下:
[{ src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?
',
poster: 'https://616e-anilagle-7474cd-1256663410.tcb.qcloud.la/logo部分的补充图/4.JPG?sign=62938ddecd979722c6726c100d8119fb&t=1547648207',
name: '音频名称',
author: '作者名称'
}]
js
import data from "../../utils/data.js"; Page({ /** * 页面的初始数据 */ data: { playStatus: true, audioIndex: -1,//如果直接播放则改为对应下标 progress: 0, duration: 0, audioList: [], showList: true, text: '', marqueePace: 1,//滚动速度 marqueeDistance: 0,//初始滚动距离 marqueeDistance2: 0, marquee2copy_status: false, marquee2_margin: 60, size: 14, orientation: 'left',//滚动方向 interval: 20 // 时间间隔 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ audioList: data }) this.setData({ audioIndex: 1, showList: false }) this.playMusic(); // console.log(data) //初始化时默认不播放 // this.playMusic(); // 页面显示 var vm = this; var length = 3 * vm.data.size;//文字长度 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度 vm.setData({ length: length, windowWidth: windowWidth, marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时,需要增加补白 }); vm.run1();// 水平一行字滚动完了再按照原来的方向滚动 }, run1: function () { var vm = this; var interval = setInterval(function () { if (-vm.data.marqueeDistance < vm.data.length) { vm.setData({ marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace, }); } else { clearInterval(interval); vm.setData({ marqueeDistance: vm.data.windowWidth }); vm.run1(); } }, vm.data.interval); }, playMusic: function () { let audio = this.data.audioList[this.data.audioIndex]; let manager = wx.getBackgroundAudioManager(); manager.title = audio.name || "音频标题"; manager.epname = audio.epname || "专辑名称"; manager.singer = audio.author || "歌手名"; manager.coverImgUrl = audio.poster; // 设置了 src 之后会自动播放 manager.src = audio.src; manager.currentTime = 0; let that = this; manager.onPlay(function () { // console.log("======onPlay======"); that.setData({ playStatus: true }) that.countTimeDown(that, manager); }); manager.onPause(function () { that.setData({ playStatus: false }) // console.log("======onPause======"); }); manager.onEnded(function () { // console.log("======onEnded======"); that.setData({ playStatus: false }) setTimeout(function () { that.nextMusic(); }, 1500); }); }, //循环计时 countTimeDown: function (that, manager, cancel) { if (that.data.playStatus) { setTimeout(function () { if (that.data.playStatus) { // console.log("duration: " + manager.duration); // console.log(manager.currentTime); that.setData({ progress: Math.ceil(manager.currentTime), progressText: that.formatTime(Math.ceil(manager.currentTime)), duration: Math.ceil(manager.duration), durationText: that.formatTime(Math.ceil(manager.duration)) }) that.countTimeDown(that, manager); } }, 1000) } }, //拖动事件 sliderChange: function (e) { let manager = wx.getBackgroundAudioManager(); manager.pause(); manager.seek(e.detail.value); this.setData({ progressText: this.formatTime(e.detail.value) }) setTimeout(function () { manager.play(); }, 1000); }, //列表点击事件 listClick: function (e) { let pos = e.currentTarget.dataset.pos; if (pos != this.data.audioIndex) { this.setData({ audioIndex: pos, showList: false }) this.playMusic(); } else { this.setData({ showList: false }) //更改播放状态 this.playOrpause(); } }, //上一首 lastMusic: function () { let audioIndex = this.data.audioIndex > 0 ? this.data.audioIndex - 1 : this.data.audioList.length - 1; this.setData({ audioIndex: audioIndex, playStatus: false, progress: 0, progressText: "00:00", durationText: "00:00" }) setTimeout(function () { this.playMusic(); }.bind(this), 1000); }, //播放按钮 playOrpause: function () { let manager = wx.getBackgroundAudioManager(); if (this.data.playStatus) { manager.pause(); } else { manager.play(); } }, //下一首 nextMusic: function () { let audioIndex = this.data.audioIndex < this.data.audioList.length - 1 ? this.data.audioIndex + 1 : 0; this.setData({ audioIndex: audioIndex, playStatus: false, progress: 0, progressText: "00:00", durationText: "00:00" }) setTimeout(function () { this.playMusic(); }.bind(this), 1000); }, //界面切换 pageChange: function () { this.setData({ showList: true }) }, //格式化时长 formatTime: function (s) { let t = ''; s = Math.floor(s); if (s > -1) { let min = Math.floor(s / 60) % 60; let sec = s % 60; if (min < 10) { t += "0"; } t += min + ":"; if (sec < 10) { t += "0"; } t += sec; } return t; }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
wxss
.item { border: 1rpx solid #eee; padding: 10rpx; font-size: 11pt; } .active { background: #a51515; color: #fff; } .background { position: fixed; left: 0; /* top: 0; */ right: 0; bottom: 0; /* text-align: center; */ background: #f5f5f5; } .background .info{ /* position: fixed; */ /* top: 140rpx; */ padding: 3px 18px 2px 108rpx; /* padding-left: 60px; */ height: 21px; left: 0; right: 0; font-size: 12pt; color: #353535; } .background .list { position: fixed; right: 40rpx; top: 40rpx; width: 60rpx; height: 60rpx; } .background .poster { width: 150rpx; height: 150rpx; border-radius: 50%; margin-top: 400rpx; } .rotate { animation: rotate 10s linear infinite; } .rotate-paused { animation: rotate 10s linear infinite; animation-play-state: paused; } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .progress { /* position: fixed; */ bottom: 90rpx; left: 50rpx; right: 50rpx; display: flex; /* align-items: center; */ font-size: 10pt; color: rgb(87, 49, 49); /* text-align: center; */ } .progress .bar { flex: 1; padding: 8rpx 0 22rpx 230rpx; margin: 0 20px; } .progress text { flex-basis: 90rpx; } .progress .text1 { position: fixed; left: 108rpx; bottom: 24rpx; } .progress .text2 { position: fixed; right: 40rpx; } .buttons { position: fixed; bottom: 0; /* left: 25rpx; */ /* right: 50rpx; */ display: flex; width: 60px; height: 60px; z-index: 9999; background: #f5f5f5; } .buttons .button { position: relative; width: 70rpx; height: 70rpx; left: 25rpx; top: 20rpx; } .example { display: block; width: 100%; height: 100rpx; } .marquee_box { width: 100%; position: relative; } .marquee_text { white-space: nowrap; position: absolute; margin-left: 108rpx; overflow: hidden; /* top: 0; */ }
效果
标题是从右往左滚动的
因为是需求,这里只显示了音频名称,需要怎样的效果可以通过css样式来调整