圆形进度条的音乐播放，微信小程序js怎么写？

建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。

WXML代码

开始动态绘制

WXSS代码

特别注意：底层的canvas最好使用

z-index:-99；放置于底层

page { width: 100% height: 100% background-color: #fff

}.circle-box { text-align: center margin-top: 10vw

}.circle { position: absolute left: 0 right: 0 margin: auto

}.draw_btn { width: 35vw position: absolute top: 33vw right: 0 left: 0 margin: auto border: 1px #000 solid border-radius: 5vw

}

JS代码

//获取应用实例var app = getApp()var intervalvar varNamevar ctx = wx.createCanvasContext('canvasArcCir')

Page({ data: {

}, drawCircle: function () {

clearInterval(varName) function drawArc(s, e) {

ctx.setFillStyle('white')

ctx.clearRect(0, 0, 200, 200)

ctx.draw() var x = 100, y = 100, radius = 96

ctx.setLineWidth(5)

ctx.setStrokeStyle('#d81e06')

ctx.setLineCap('round')

ctx.beginPath()

ctx.arc(x, y, radius, s, e, false)

ctx.stroke()

ctx.draw()

}var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0 var animation_interval = 1000, n = 60 var animation = function () { if (step

使用微信小程序实现一个简易的音乐播放器.

Github地址

虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能).

主要实现的功能有:

1.实现音频播放,暂停

2.实现拖拽进度条,快进音频进度

3.实现上一首,下一首,列表循环播放

4.实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试

一丶index.js

二丶index.wxml

三丶index.wxss

四丶要实现关闭小程序后,依然后台播放,微信顶部悬浮展示,需要再app.json配置requiredBackgroundModes属性

附上官方相关api链接:

BackgroundAudioManager.html

wx.getBackgroundAudioManager()

slider组件

---