阅读921 返回首页    go 小米 go 小米5


微信小程序的音频组件中音乐播放器

音频组件可以实现音频类的在线播放和操作控制。甚至于微信官方已经构想到了不错的样式和操作方式,可以非常简单地实现一个不错的用户UI。如果binderror属性出现错误时,将会显示不同的错误信息,以供开发者获取错误信息,并提供响应的解决方案给用户。在新建项目中view视图编辑代码:

在JS中编辑代码,为了使界面更美观

更改wxss样式文件,让整个视图变得更美观:

保存上述代码运行后最终显示效果如图所示

通过设置的音频地址(src)和专辑图片的地址(poser),载入网络上的音频和封面信息,形成了一个矩形的音乐播放样式,单击专辑封面的“播放”按钮可以进行音乐的播放。通过对于author和name的设置确定了在右方显示的音乐名称和作者,而对于整个audio控件,最右边自动加载其播放的进度。下方三个按钮的作用就是对于音频播放的控制和调整,先通过this.audioCtx=wx.createAudioContext('muAudio')获取播放控件的上下文(这里其实相当于网页的getElementbyId),再通过监听单击按钮事件来控制属性。

最后更新:2017-10-08 05:36:33

  上一篇:go 微信还有这种贴心功能,你一定不知道!
  下一篇:go 微信小程序的图片控件功能使用应用详解