微信小程序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 () {}
})

微信小程序Audio音频（有关歌曲和图片的路径）相关推荐

微信小程序html5音频,微信小程序 audio音频播放详解及实例
loop:是否循环播放 id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象. bindplay:播放时触发该事件 b ...
微信小程序—audio(音频)
今天来介绍一下微信小程序中音频播放控件–audio 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html 1.效果图如 ...
android获取小程序音频时长,最新微信小程序获取音频时长与实时获取播放进度...
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
最新微信小程序获取音频时长与实时获取播放进度
#微信小程序获取音频时长与实时获取播放进度在小程序官方文档中 audio 注意:1.6.0 版本开始,该组件不再维护.建议使用能力更强的 wx.createInnerAudioContext 接口 ...
java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进 ...
微信小程序多音频场景处理 - 背景音频
微信小程序多音频场景处理 - 背景音频提到音频播放控制,不得不提背景音频这个方法wx.getBackgroundAudioManager 很不幸,这个有坑.当使用场景为单音频播放或者不需要记录每个音 ...
解决微信小程序安卓手机访问不到图片，无法显示图片
关于微信小程序不显示图片通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问本地图片:确定相对路径或者绝对路径正确微信小程序图 ...
微信小程序的wx.chooseImage如何把图片传给后端
微信小程序的wx.chooseImage如何把图片传给后端首选wx.chooseImage的用法先见官方文档 => wx.chooseImage 这个的返回值如下↓ 这里可以看到这个temp ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...

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

微信小程序Audio音频（有关歌曲和图片的路径）相关推荐

最新文章

热门文章