小程序音频播放带上下切换音频，带列表选择

最新推荐文章于 2023-12-21 19:11:41 发布

ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ

最新推荐文章于 2023-12-21 19:11:41 发布

阅读量2.2k

点赞数 3

分类专栏：微信小程序文章标签：音

本文链接：https://blog.csdn.net/qq_41241504/article/details/86704986

版权

本文介绍了如何在微信小程序中实现音频播放，并且支持上下切换音频以及列表选择功能，同时提供了微信小程序开发交流QQ群号码。

摘要由CSDN通过智能技术生成

微信小程序开发交流qq群 581478349

微信：

承接小程序开发

<view class=''>
<!-- 背景图片 -->
  <image class='bg' src='http://img4.imgtn.bdimg.com/it/u=1866686759,3600446626&fm=214&gp=0.jpg' mode='aspectFill'></image>
</view>
<view class='item'>
  <view class='toptext_bor'>
    <view class='toptext1'>碎 片 时 间 . 听 见 未 来</view>
    <!-- 动态展示标题 -->
    <view class='toptext2'>{
  {title}}</view>
  </view>
  <!-- 旋转图片 -->
  <image class='audio_post{
  {music_on?" music_on":""}}' style="animation-play-state:{
  {music_playing?'running':'paused'}}" src='{
  {img}}'></image>
</view>
<view class='bt_pos'>
  <view class='audio_progress'>
  <!-- 播放进度 -->
    <view class='time'>{
  {starttime}}</view>
    <!-- 进度条 -->
    <slider block-size='14' bindchange="sliderChange" block-size="12px" step="2" value="{
  {offset}}" max="{
  {max}}" selected-color="#4c9dee"></slider>
    <!-- 音频长度 -->
    <view class='time1'>{
  {duration}}</view>
  </view>
  <view class='audio_control'>
    <!-- 列表 -->
    <image src='/img/list.png' class=' rt_img' bindtap='showModal'></image>
    <!-- 上 -->
    <image src='/img/shang.png' class=' anniu_img_sx ' bindtap='play_shang'></image>
    <!-- 播放 -->
    <image src='/img/bf.png' class='anniu_img anniu_img_sx' bindtap="listenerButtonPlay" wx:if="{
  {!isOpen}}"></image>
    <!-- 暂停 -->
    <image src='/img/zt.png' class='anniu_img anniu_img_sx ' bindtap="listenerButtonPause" wx:if="{
  {isOpen}}"></image>
    <!-- 下 -->
    <image src='/img/xia.png' class=' anniu_img_sx ' bindtap='play_xia'></image>
    <!-- 转发  -->
    <image src='/img/zf.png' class='rt_img' ></image>
  </view>
</view>


<view style='display:{
  {show}}'>
  <view class='show' bindtap='hide'></view>
  <view class='show_bo' animation="{
  {animationData}}" wx:if="{
  {showModalStatus}}">
    <scroll-view class='for_list' scroll-y='true'>
      <block wx:for='{
  {title_list}}' wx:key=''>
        <block wx:if="{
  {index == clickId}}">
          <view class='bo_list_bot' catchtap='play_list' data-index='{
  {item.id}}' type='primary'>
            <cover-image src='/img/tuwen.png