微信小程序把玩(三十四)Audio API

简介: 原文:微信小程序把玩(三十四)Audio API 没啥可值得太注意的地方 重要属性: 1. wx.getBackgroundAudioPlayerState(object) 获取播放状态 2.
原文: 微信小程序把玩(三十四)Audio API

这里写图片描述

没啥可值得太注意的地方

重要属性:

1. wx.getBackgroundAudioPlayerState(object) 获取播放状态

这里写图片描述

2.wx.playBackgroundAudio(object)播放音乐

这里写图片描述

3.wx.pauseBackgroundAudio()暂停音乐

4.wx.seekBackgroundAudio(object) 设置播放进度

这里写图片描述

5.wx.stopBackgroundAudio()停止播放音乐

三个监听器:

这里写图片描述

wxml

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

js

Page({
  data:{
    // text:"这是一个页面"
  },

  listenerButtonPlay: function() {
      wx.playBackgroundAudio({
          //播放地址
          dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',
          //title 音乐名字
          title: '青云志',
          //图片地址
          coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'

      })
  },

  /**
   * 播放状态
   */
  listenerButtonGetPlayState: function() {
      wx.getBackgroundAudioPlayerState({
          success: function(res) {
              console.log(res)
              //duration 总时长
              //currentPosition 当前播放位置
              //status 播放状态
              //downloadPercent 下载状况 100 即为100%
              //dataUrl 当前播放音乐地址
          }
      })
  },
  /**
   * 监听button暂停按钮
   */
  listenerButtonPause: function() {
      wx.pauseBackgroundAudio();
  },
  /**
   * 设置进度
   */
  listenerButtonSeek: function() {
      wx.seekBackgroundAudio({
          position: 30
      })
  },
  /**
   *停止播放 
   */
  listenerButtonStop: function() {
      wx.stopBackgroundAudio()
  },

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

    /**
     * 监听音乐暂停
     */
    wx.onBackgroundAudioPause(function() {
        console.log('onBackgroundAudioPause')
    })

    /**
     * 监听音乐停止
     */
    wx.onBackgroundAudioStop(function() {
        console.log('onBackgroundAudioStop')
    })

  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
目录
相关文章
|
2月前
|
小程序 安全 JavaScript
微信小程序API+京东支付,无缝结账体验满分!
在数字化时代,支付体验成为电商竞争关键。本文详解如何通过微信小程序API无缝集成京东支付,实现“一键结账”流畅体验。结合微信庞大用户基础与京东支付安全高效优势,助力电商业务提升转化与用户满意度。
161 0
|
3月前
|
人工智能 自然语言处理 小程序
微信小程序+淘宝API,无缝购物体验提升复购率!
在电商竞争激烈的当下,微信小程序与淘宝API的整合为商家提供了一条提升用户体验与复购率的创新路径。本文详解其整合原理、实现步骤及优势,助力商家打造无缝购物体验,提升转化效率。
189 0
|
1月前
|
安全 NoSQL API
拼多多:通过微信支付API实现社交裂变付款的技术解析
基于微信JSAPI构建社交裂变支付系统,用户发起拼单后生成预订单与分享链接,好友代付后通过回调更新订单并触发奖励。集成微信支付、异步处理、签名验签与Redis关系绑定,提升支付成功率与裂变系数,实现高效安全的闭环支付。
309 0
|
2月前
|
移动开发 小程序 安全
微信API社交裂变工具,老带新流量成本归零!
在数字化营销时代,利用微信API构建社交裂变工具,可实现“老带新”的病毒式传播,大幅降低获客成本。本文详解如何通过微信API实现零成本流量增长,解析裂变机制与技术实现。
136 0
|
2月前
|
数据采集 小程序 搜索推荐
微信小程序API+淘宝数据分析,决策精准如神助!
本文探讨如何结合微信小程序API与淘宝数据分析,实现数据驱动的智能决策。通过实时数据采集、用户行为分析与机器学习模型,助力企业提升运营效率与市场竞争力,实现精准营销与高效决策。
91 0
|
3月前
|
供应链 小程序 API
微信小程序API集成京东库存,移动端销量暴涨!
在数字化时代,微信小程序与京东库存系统集成成为提升移动端销量的关键策略。本文详解如何通过API实现库存实时同步、优化用户体验,推动销量增长50%以上,并结合实际案例与代码示例,为企业提供可落地的解决方案。
120 0
|
8月前
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
11月前
|
监控 小程序 安全
小程序的 API 做了什么处理,能够做到全局变量的隐藏
【10月更文挑战第23天】小程序的 API 通过运行环境隔离、作用域限制、数据绑定机制、事件机制、状态管理、代码封装和模块化、安全策略和权限控制以及运行时监控和检测等多种手段来实现全局变量的隐藏。这些措施共同作用,确保了小程序的安全、稳定和可靠运行,同时也提高了开发效率和代码质量。
160 10
|
Web App开发 缓存 小程序
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
【Azure API 管理】从微信小程序访问APIM出现200空响应的问题中发现CORS的属性[terminate-unmatched-request]功能
155 1
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
下一篇
开通oss服务