帮我写一个微信小程序播放器界面
时间: 2023-10-28 14:14:42 浏览: 50
好的,以下是一个简单的微信小程序播放器界面示例代码:
```
<view class="player-container">
<audio src="{{audioUrl}}" bindplay="onPlay" bindpause="onPause"></audio>
<view class="player-controls">
<button class="play-btn" bindtap="togglePlay">{{isPlaying ? '暂停' : '播放'}}</button>
<view class="progress-bar">
<view class="progress" style="width: {{playProgress}}%;"></view>
</view>
</view>
</view>
```
其中,`audioUrl` 为音频文件的 url,`isPlaying` 表示当前是否正在播放,`playProgress` 表示播放进度(0-100)。
接下来是对应的样式:
```
.player-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.player-controls {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.play-btn {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #f00;
border-radius: 20px;
border: none;
outline: none;
cursor: pointer;
}
.progress-bar {
width: 80%;
height: 10px;
background-color: #ccc;
margin-top: 20px;
}
.progress {
height: 100%;
background-color: #f00;
}
```
以上代码实现了一个简单的音频播放器,包括播放/暂停按钮和进度条。你可以根据自己的需求进行修改和扩展。