草庐IT

简单实现微信小程序音乐音频播放的功能

肖肖冲鸭 2023-09-08 原文

效果图：

1）获取歌曲详情页的数据
从每日推荐列表点击各歌曲跳转到歌曲详情页的时候，需要携带歌曲的id,在路由中把歌曲的id传到歌曲详情页的页面中使用（在wxml文件中通过data-id的形式把id传歌曲id）

recommendSong.js

 // 跳转至songDetail的回调
  tosongDetail(event){
    let musicId=event.currentTarget.dataset.id
    console.log(song)
    // 路由跳转传参可以使用query的形式
    wx.navigateTo({
      url: '/pages/songDetail/songDetail?musicId='+musicId,
    })
  },

2）在songDetail.js文件中，可以在onload这个周期函数中的options参数里获取到recommendSong.js中通过路由传过来的参数，然后拿到musicId去调用歌曲详情页的接口获取歌曲详情数据
songDetail.js

  data: {
    isPlay:false, //标识音乐是否播放
    song:{},
    musicId:'', //音乐的Id
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    // 获取音乐id
    let musicId=options.musicId
    this.setData({
      musicId
    })
    this.getMusicInfo(musicId)
  },

  // 封装获取音乐详情的功能函数
  async getMusicInfo(musicId){
    let songData=await request('/song/detail',{ids:musicId})
    // console.log(songData)
    // 更新song详情对象
    this.setData({
      song:songData.songs[0]
    })
  },

3）

  1. 渲染完页面之后，需要实现音乐的播放或者暂停功能（通过打的标识isPlay实现），
  2. 点击播放按钮的时候进行播放，绑定相应的点击事件函数，
  3. 需要实现播放功能，需要封装一个音频播放函数，在点击事件进行的时候同步进行播放或者暂停
    （1）调用相应的接口获取到相应的音乐播放地址
    （2）获取到实现音频播放的实例，背景播放通过wx.getBackgroundAudioManager()
    （3）若要播放（isPlay为true）把地址添加进这个音频实例的src属性里面去，实现播放功能，同时还要给这个实例添加一个title属性才不会报错
    （4）若要暂停，也要通过这个音频实例调用pause方法进行实现
<text class="iconfont {{isPlay?'icon-zanting': 'icon-bofang'}} big" bindtap="handleMusicPlay"></text>

songDetail.js

  // 点击播放或暂停的回调
  handleMusicPlay(){
    let isPlay=!this.data.isPlay
    // 修改是否播放的状态
    this.setData({
      isPlay
    })
    let {musicId}=this.data
    this.musicControl(isPlay,musicId)
  },

  // 封装控制音乐播放暂停的功能函数
  async musicControl(isPlay,musicId){
    // 获取音乐的播放地址
    let musicLinkData=await request('/song/url',{id:musicId})
    let musicLink=musicLinkData.data[0].url
    let backgroundAudioManager=wx.getBackgroundAudioManager()
    if (isPlay) {//播放音乐
      // 生成背景音频实例
      backgroundAudioManager.src=musicLink
      backgroundAudioManager.title=this.data.song.name
    }else{//暂停音乐
      backgroundAudioManager.pause()
    }
  },

到这里点击播放音频的时候，还会出现报错，如下：

根据提示需要在app.json中配置相应属性才能实现audio的播放效果：

"requiredBackgroundModes": ["audio"]
简单实现spanclasstoken微信小程序音视频小程序

有关简单实现微信小程序音乐音频播放的功能的更多相关文章

  1. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  2. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  3. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  4. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2

    只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您

  5. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  6. ruby - 使用 Ruby 通过 Outlook 发送消息的最简单方法是什么？ - 2

    我的工作要求我为某些测试自动生成电子邮件。我一直在四处寻找，但未能找到可以快速实现的合理解决方案。它需要在outlook而不是其他邮件服务器中，因为我们有一些奇怪的身份验证规则，我们需要保存草稿而不是仅仅发送邮件的选项。显然win32ole可以做到这一点，但我找不到任何相当简单的例子。 最佳答案 假设存储了Outlook凭据并且您设置为自动登录到Outlook，WIN32OLE可以很好地完成此操作:require'win32ole'outlook=WIN32OLE.new('Outlook.Application')message=

  7. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  8. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  9. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  10. Qt Designer的简单使用 - 2

    在前面两节的例子中，主界面窗口的尺寸和标签控件显示的矩形区域等，都是用C++代码编写的。窗口和控件的尺寸都是预估的，控件如果多起来，那就不好估计每个控件合适的位置和大小了。用C++代码编写图形界面的问题就是不直观，因此Qt项目开发了专门的可视化图形界面编辑器——QtDesigner（Qt设计师）。通过QtDesigner就可以很方便地创建图形界面文件*.ui，然后将ui文件应用到源代码里面，做到“所见即所得”，大大方便了图形界面的设计。本节就演示一下QtDesigner的简单使用，学习拖拽控件和设置控件属性，并将ui文件应用到Qt程序代码里。使用QtDesigner设计界面在开始菜单中找到「Q

随机推荐