微信小程序音频播放
<!-- index.wxml -->
<audio id="myAudio" src="{{audioUrl}}" bindtimeupdate="onAudioTimeUpdate"></audio>
<text>当前时间:{{formatTime(currentTime)}} / 总时长:{{formatTime(duration)}}</text>
<slider value="{{currentTime}}" max="{{duration}}" bindchanging="onSliderChange"></slider>
在上述代码中,我们使用了<audio>
组件来进行音频的播放,通过绑定src
属性指定要播放的音频文件。
同时,我们使用了bindtimeupdate
事件来监听音频播放时间的变化,并调用onAudioTimeUpdate
方法进行处理。
在文本部分,我们展示了当前播放时间和总时长。
最后,我们使用了<slider>
组件来展示音频播放的进度条,通过设置value
属性为当前播放时间,max
属性为总时长,来控制滑块的位置和长度。
接下来,我们需要在对应的JavaScript文件中编写相应的逻辑代码来实现获取音频的播放时长和进度。
// index.js
Page({
data: {
audioUrl: '音频地址',
currentTime: 0,
duration: 0
},
onAudioTimeUpdate(event) {
const { duration, currentTime } = event.detail;
this.setData({
duration,
currentTime
});
},
onSliderChange(event) {
const { value } = event.detail;
this.setData({
currentTime: value
});
},
formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}
});
在上述代码中,我们定义了一个Page
对象,其中包含了一些数据和方法来处理音频的播放时长和进度。
onAudioTimeUpdate
方法用于响应音频播放时间的变化事件。通过获取event.detail
中的duration
和currentTime
,我们可以更新数据中的总时长和当前播放时间。
onSliderChange
方法用于响应滑动条的变化事件,获取滑动条的值,并更新数据中的当前播放时间。
formatTime
方法用于将秒数格式化为分:秒的形式,以便在界面中显示播放时间。
需要注意的是,根据实际需求,你需要替换代码中的'音频地址'
为真实的音频地址,并适当调整代码结构和样式以满足你的需求。同时,你还需要在对应的页面中编写相应的视图代码来展示播放时长、进度和控制按钮等
微信小程序视频播放
微信小程序内置了控制视频播放、暂停和全屏功能的 API,可以通过调用相应的方法来实现。下面是示例代码:
wxml 文件:
<video id="video" src="视频地址" autoplay bindplay="onPlay" bindpause="onPause" bindfullscreenchange="onFullScreenChange"></video>
js 文件:
Page({
onPlay() {
// 视频播放事件处理
console.log('视频开始播放');
},
onPause() {
// 视频暂停事件处理
console.log('视频已暂停');
},
onFullScreenChange(event) {
// 全屏状态变化事件处理
if (event.detail.fullScreen) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
},
playVideo() {
const videoContext = wx.createVideoContext('video');
videoContext.play();
},
pauseVideo() {
const videoContext = wx.createVideoContext('video');
videoContext.pause();
},
enterFullScreen() {
const videoContext = wx.createVideoContext('video');
videoContext.requestFullScreen();
},
exitFullScreen() {
const videoContext = wx.createVideoContext('video');
videoContext.exitFullScreen();
}
})
这样,你就可以在小程序中实现视频的播放/暂停功能,并且监听全屏状态的变化。点击按钮或其他触发方式来调用 playVideo()
、pauseVideo()
、enterFullScreen()
、exitFullScreen()
方法来控制视频的播放、暂停和全屏切换。请确保将 视频地址
替换为你实际的视频链接或本地视频路径。