微信小程序 音频播放器

文章目录

1. source code

<view class='audioPalyWrap'><view class='picWrap'><view class='pic {{ !onoff ? "active":"" }}'><image src='/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'mode='center'></image></view></view><view class='playControl'><view class='playButton' bindtap="handlePlayer"><text class='iconfont icon-bofang' wx:if='{{ onoff }}'></text><text class='iconfont icon-zantingtingzhi' wx:else></text></view><view class='time'><text> {{ currentTime }} </text><progress percent="{{ progressTime }}" activeColor='red' backgroundColor='blue' ></progress><text> {{ totalTime }} </text></view></view><audio id='myAudio'></audio> </view>

@import './icon.wxss';page{height: 100%;}.audioPalyWrap{width: 100%;height: 100%;background-color: #06AF8F;background: -webkit-linear-gradient( 135deg, rgb(142, 132, 133) 0%, rgb(230, 132, 110) 100% );background: linear-gradient( 135deg, rgb(142, 132, 133) 0%, rgb(230, 132, 110) 100% );display: flex;flex-direction: column;justify-content: space-around;/* overflow: hidden; */}.picWrap{width: 50vw;height: 50vw;border-radius: 50%;margin-left: 25vw;background: url('//12/28/roRPPK.png') no-repeat;/* background-position: -7rpx -7rpx; */background-size: 100% 100%;display: flex;justify-content: center;align-items: center;box-shadow: 0 0 100rpx yellowgreen;}.pic{width: 70%;height: 70%;border-radius: 50%;}.pic.active{animation: animate 3s linear infinite ;}@keyframes animate {0% {rotate: 0deg;}100% {rotate: 360deg;}}.pic image{width: 100%;height: 100%;border-radius: 50%;}.playControl{display: flex;justify-content: space-between;align-items: center;margin: 0 30rpx;background-color: white;}.playButton{width: 50rpx;height: 50rpx;}.playButton text{font-size: 50rpx;}.time{flex:1;display: flex;justify-content: space-between;}progress{width: 80%;padding: 0 20rpx;}

Page({/*** 页面的初始数据*/data: {currentTime: '00:00', // 当前播放时间totalTime: '00:00', // 音频总时间progressTime: 0, // 进度条百分比onoff: true // 切换播放按钮},// 点击播放按钮，处理相关逻辑handlePlayer(){const {onoff} = this.data;if(onoff){this.audioCtx.play() // 播放}else{this.audioCtx.pause() // 暂停}this.setData({onoff: !onoff})this.handlerProgress()},// 处理进度条，当前时间，总时间handlerProgress(){// 监听音频播放进度更新事件this.audioCtx.onTimeUpdate(()=>{// 总时间const totalTime = this.audioCtx.duration;this.setData({totalTime:this.handlerTime(totalTime),currentTime: this.handlerTime(this.audioCtx.currentTime),progressTime: ((this.audioCtx.currentTime / totalTime) * 100) | 0})})},onReady(){// 获取音频对象this.audioCtx = wx.createInnerAudioContext('myAudio'); // 音频地址this.audioCtx.src = "/static/banhusha.mp3" // 循环播放this.audioCtx.loop = true; },// 处理时间handlerTime(res){let m = ( res / 60 | 0) + '';m = (m.length == 1) ? 0 + m : m;let s = (res % 60 | 0) + '';s = (s.length == 1) ? 0 + s : s;return m + ':' + s}})

图标文件

@font-face {font-family: "iconfont";src: url('///t/font_2296816_0homgqo6vlc.eot?t=1609138559791'); /* IE9 */src: url('///t/font_2296816_0homgqo6vlc.eot?t=1609138559791#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALQAAsAAAAABsQAAAKBAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBIIEaATYCJAMMCwgABCAFhG0HQRvrBcguoRzbUaREZeywEHvY16dXRQAnQxFQ+/HbkyffNElSjYZNJ6km90iC1mjQRbNaCe9/9/vd/z8q1YY1UU1an97t7dl29oYmD109kQqECBESkVzIom2AgIHOCfAEXFvThbPnE/dO/yigQOYDymntfT4mYBRwQHtjFFmJlBg3jF3gEu4T0GpEs9SO2eU1yJNZywLCac4syMuFZZnlakFZszcLjxXq+DB+AI/Cz4f/OssjKhJr7c5TMy6M//JTmfabfQd8QoQAHi6QMAtkwqHa9B4ZgbEyWtVZ7aWlLIhzxZqGUKwrS/sPjygQSlZ1O5hEmcgvcMWpphJK77o6gTKumASWWNr+8PdBbO/svCUfn9dUNy+aLrzd/9uqfPWu58na4vq9nRvb93Wl/c/L0g68ieY/oHVjkuY+ragMhn+ZV7OzwQRoTqdpPCTHv5FCYPkyStf+axl8KL2/B0LNGfpXqEWY5J9JenZlXWZZUlbFrtj0JkMjnREo5D4Ny9/re7x+4L6cQZ2TMESVYSS1UTIzZ1Fos4pSbROtZswdbtNHyQi5BdNOAIJu74g6PUPS7ZPMzC8UBv2h1F0GrXaFvjPbjMcLtiu0NLrE3iXcETF1bLogql1BthlaKisL2RuoEh4jHa3txdwcxqjm2JBssU6tKaFKRGQWPIZhKIhUwkdHt3pay8G2Nlr3olZHRFBgOwVZNOQibLsIziHEqD9YKyi9fwViNoUsqqWuJrgBKQk+OtGhVXsPck4d96q7l2cSW5hOmkYRlCJEiFkwC4VCAiHrZ/mQQ2vljUhKg9rsfrSvunV9bfQBRawJ64IUYkghK48JasWs5Kb1JqaYuak9jwMAAAAA') format('woff2'),url('///t/font_2296816_0homgqo6vlc.woff?t=1609138559791') format('woff'),url('///t/font_2296816_0homgqo6vlc.ttf?t=1609138559791') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('///t/font_2296816_0homgqo6vlc.svg?t=1609138559791#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-bofang:before {content: "\e613";}.icon-zantingtingzhi:before {content: "\e600";}

2. 效果图