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