微信小程序实现音乐播放器

今天继续玩小程序的api,看着别人例子跟着做一个小程序,留下一个脚印吧。末尾附上github源码地址。实现以下微信小程序的音乐播放器,先看下效果图

界面做的确实挺丑的,先上wxss文件

//index.wxss
.button-style{
  background-color: #eee;
  border-radius: 8rpx;
  margin: 20rpx;
}

只是顶一个简单的按钮的圆角和间距,颜色这个我还是用primary这个小绿色。
下面是index.wxml文件

//index.wxml
<button class="button-style" type="primary" bindtap="listenerButtonPlay">播放</button>
<button class="button-style" type="primary" bindtap="listenerButtonPause">暂停</button>
<button class="button-style" type="primary" bindtap="listenerButtonSeek">设置播放进度</button>
<button class="button-style" type="primary" bindtap="listenerButtonStop">停止播放</button>
<button class="button-style" type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button>

没办法,用开发者工具打出来就是这样的丑格式

下面是重点index.js

//index.js
//获取应用实例
var app = getApp()
Page({
 data:{

 },
 //播放
 listenerButtonPlay:function(){
  wx.playBackgroundAudio({
   dataUrl: 'http://ac-5g9r20ds.clouddn.com/e54ad7f0a834b9c07ec6.mp3',
   title:'李宗盛',
   //图片地址地址
   coverImgUrl:'http://ac-5g9r20ds.clouddn.com/63bedb5f584234b6827c.jpg'
  })
 },
 //监听button暂停按钮
 listenerButtonPause:function(){
  wx.pauseBackgroundAudio({

  });
  console.log('暂停播放')
 },
 /**
  * 播放状态
  */
 listenerButtonGetPlayState:function(){
  wx.getBackgroundAudioPlayerState({
   success: function(res){
    // success
    //duration 选定音频的长度(单位:s),只有在当前有音乐播放时返回
    console.log('duration:' + res.duration)
    console.log('currentPosition:' + res.currentPosition)
    //status  播放状态(2:没有音乐在播放,1:播放中,0:暂停中)
    console.log('status:' + res.status)
    console.log('downloadPercent:' + res.downloadPercent)
    //dataUrl  歌曲数据链接,只有在当前有音乐播放时返回
    console.log('dataUrl:' + res.dataUrl)
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })
 },
 /**
  * 设置进度
  */
 listenerButtonSeek:function(){
  wx.seekBackgroundAudio({
   position: 40
  })
 },
 /**
  * 停止播放
  */
 listenerButtonStop:function(){
  wx.stopBackgroundAudio({

  })
  console.log('停止播放')
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  /**
   * 监听音乐播放
   */
  wx.onBackgroundAudioPlay(function() {
   // callback
   console.log('onBackgroundAudioPlay')
  })
  /**
   * 监听音乐暂停
   */
  wx.onBackgroundAudioPause(function() {
   // callback
   console.log('onBackgroundAudioPause')
  })
  /**
   * 监听音乐停止
   */
  wx.onBackgroundAudioStop(function() {
   // callback
   console.log('onBackgroundAudioStop')
  })
 }
})

里面可以先按照顺序来看onLoad函数,里面定义了三个监听函数,可以看到console里面效果如图

其实里面的api使用不是很难,在button标签里面写好bindtap事件名,在js方法中对应相应的处理function,像wx.playBackgroundAudio这个只需要你去填充一些参数即可,不懂得可以参考api文档(API入口)。
附上github源码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-11-19

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//

微信小程序 开发之滑块视图容器(swiper)详解及实例代码

微信小程序 开发之滑块视图容器详解 实现效果图: 实现起来特别简单,看看代码是怎么写的呢: <swiper class="swiper" indicator-dots="{{indcatorDots}}" autoplay="{{autoPlay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="

微信小程序开发之相册选择和拍照详解及实例代码

微信小程序 拍照和相机选择详解 前言: 小程序中获取图片可通过两种方式得到,第一种是直接打开微信内部自己的样式,第一格就是相机拍照,后面是图片,第二种是弹框提示用户是要拍照还是从相册选择,下面一一来看. 选择相册要用到wx.chooseImage(OBJECT)函数,具体参数如下: 直接来看打开相机相册的代码: Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var t

微信小程序开发的四十个技术窍门总结(推荐)

前言 微信"小程序"正式上线一周时间,相关话题持续升温.支付宝开发"小程序"的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的"APP帝国"了.那么,面对如此炙手可热的小程序,WeX5移动开发云也没有闲着,经过全网搜索,为大家筛选出一条小程序开发者的必读文章,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考! Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一

微信小程序停止其他视频播放当前视频的实例代码

微信小程序停止其他视频播放当前视频,代码如下所示: <view class="content"> <!--首页--> <scroll-view class='nav-page'> <view class="item-box " wx:for="{{videelsi}}" wx:key="item"> <!-- 标题层 --> <!-- 视频图片层 -->

微信 小程序开发环境搭建详细介绍

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图 开发工具下载是看到GitHub上的分享.那么你可以直接

微信小程序开发之选项卡(窗口底部TabBar)页面切换

微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": &qu

微信小程序开发图片拖拽实例详解

微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

微信小程序开发入门基础教程

微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow