微信小程序音乐播放器

小程序实现音乐播放相当的简单,官方给了二种实现音乐播放

第一种：

  /**
   * 音乐播放器
   */
  playMusic: function (event){
      wx.BackgroundAudioManager({
        dataUrl: 'http://music.163.com/song/media/outer/url?id=108220.mp3',
        title:"夜夜夜夜-齐秦",
        coverImgUrl:"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000",
        success:function(res){
            console.log("成功---");
        },
        fail:function(res){
          console.log("失败---");
        }
      })

效果：

这是独立于我们布局的，意思是打开另外一个界面,当前界面关闭了,它还是存在的,因为他是跟随整个项目工程的,只有项目工程关闭了,这个才会被关闭

api:

还有一种实现方式是通过audio组件方式,

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

数据源配置;

data: {
    src:"http://music.163.com/song/media/outer/url?id=108220.mp3",
    author:"许巍",
    name:"夜夜夜",
    poster:"http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
  },

 这个在1.6版本后不再维护了

注意：1.6.0 版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口

相关属性：

 

属性名	类型	默认值	说明
id	String		audio 组件的唯一标识符
src	String		要播放音频的资源地址
loop	Boolean	false	是否循环播放
controls	Boolean	false	是否显示默认控件
poster	String		默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name	String	未知音频	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author	String	未知作者	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
bindplay	EventHandle		当开始/继续播放时触发play事件
bindpause	EventHandle		当暂停播放时触发 pause 事件
bindtimeupdate	EventHandle		当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended	EventHandle		当播放到末尾时触发 ended 事件

后面是几个回调方法 ,开始播放  暂停播放等.

设置id属性的作用是为了获取InnerAudioContext对象,然后对音乐进行一系列的操作.

这种实现效果如下：

发现二种是宪法方式,UI也会不同.这些都是在模拟器上运行的,没有在真机上运行.