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 () {
}
})