微信小程序Audio音频(有关歌曲和图片的路径)

emmm,这个学期开了微信小程序的课,然后这次实验中有一个任务是制作音频。

老师给了源代码(如以下):但是实际操作之后却发现不能成功。。

官方网址:https://developers.weixin.qq.com/miniprogram/dev/component/audio.html

之后发现src的路径有问题。因为点开之后音频没有办法播放。好的,恭喜我找到了问题。

先给出最后的实现效果:

本来想试试QQ音乐,但是发现一直处于登录和未登录的状态。然后我选择了酷狗音乐。

步骤如下:打开主页,登录账号,然后选择歌曲,

按F12 ,大概出来的界面是这样的:这里要注意audio#myAudio.music,找到这个,点击一下。选择properties,找到currentsrc当前路径,就是该歌曲的地址了。也就是说,你可以选择换成其他歌曲的地址。

歌曲的图片地址:同样的方法,先选定好对应的网页模块,找到标签,然后顺着标签就可以找到图的路径啦

最后附上我的全部代码~

<!-- audio.wxml -->
<audio action="{{action}}" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
// pages/audio/audio.js
Page({
    onReady:function(e){
      this.audioCtx = wx.createAudioContext('myAudio')
    },
  /**
   * 页面的初始数据
   */
  data: {
    action: {
      method: ''
    },
    poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    name:'此时此刻',
    author:'许巍',
    src:'https://webfs.yun.kugou.com/201911011600/138554921092715747ea60034f19534a/G011/M04/1B/17/q4YBAFUJplOAfzvBAGIkAK9dBrM924.mp3'
  },
  audioPlay:function()
  {
    // this.audioCtx.play()
    this.setData({
      action: {
        method: 'play'
      }
    })
  },
  audioPause:function()
  {
    this.setData({
      action: {
        method: 'pause'
      }
    })
  },
  audio14: function () {
    this.setData({
      action: {
        method: 'setCurrentTime',
        data: 14//以秒为单位
      }
    })
  },
  audioStart: function () {
    this.setData({
      action: {
        method: 'setCurrentTime',
        data: 0//以秒为单位
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
发布了45 篇原创文章 · 获赞 6 · 访问量 4948

猜你喜欢

转载自blog.csdn.net/qq_40761693/article/details/102861135
今日推荐