• 原生小程序音频播放


    微信小程序之——音频播放

    audio

    官方 1.6.0 版本开始,该组件不再维护

    实现的示例 官网 有详细的文档介绍

    getBackgroundAudioManager

    wx.getBackgroundAudioManager()

    官方文档

    获取全局唯一的背景音频管理器。

    小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。

    wxml

    <view class="container">
      <view class='background'>
        <view class='info'>
          <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">{{audioList[audioIndex].name||""}}</view>
          <!-- <view>{{audioList[audioIndex].author||""}}</view> -->
        </view>
        <view class='progress'>
          <text class="text1">{{progressText}}/{{durationText}}</text>
          <slider class='bar' bindchange="sliderChange" bindchanging="sliderChanging" value="{{progress}}" step="1" min='0' max='{{duration}}' activeColor="#cf0103" block-size="4" block-color="#c1c2c3" />
          
        </view>
        <view class='buttons'>
          <image class='button' bindtap='playOrpause' src='{{playStatus?"/images/pause.png":"/images/play.png"}}'></image>
        </view>
      </view>
    </view>
    js中 import 导入的data是数据

    格式如下:

    [{
       src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?', 
      poster:
    'https://616e-anilagle-7474cd-1256663410.tcb.qcloud.la/logo部分的补充图/4.JPG?sign=62938ddecd979722c6726c100d8119fb&t=1547648207',
      name: '音频名称',
      author: '作者名称'
    }
    ]

    js

    import data from "../../utils/data.js";
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        playStatus: true,
        audioIndex: -1,//如果直接播放则改为对应下标
        progress: 0,
        duration: 0,
        audioList: [],
        showList: true,
    
        text: '',
        marqueePace: 1,//滚动速度
        marqueeDistance: 0,//初始滚动距离
        marqueeDistance2: 0,
        marquee2copy_status: false,
        marquee2_margin: 60,
        size: 14,
        orientation: 'left',//滚动方向
        interval: 20 // 时间间隔
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.setData({
          audioList: data
        })
        this.setData({
          audioIndex: 1,
          showList: false
        })
        this.playMusic();
        // console.log(data)
        //初始化时默认不播放
        // this.playMusic();
    
        // 页面显示
        var vm = this;
        var length = 3 * vm.data.size;//文字长度
        var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
        vm.setData({
          length: length,
          windowWidth: windowWidth,
          marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时,需要增加补白
        });
        vm.run1();// 水平一行字滚动完了再按照原来的方向滚动
      },
      run1: function () {
        var vm = this;
        var interval = setInterval(function () {
          if (-vm.data.marqueeDistance < vm.data.length) {
            vm.setData({
              marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
            });
          } else {
            clearInterval(interval);
            vm.setData({
              marqueeDistance: vm.data.windowWidth
            });
            vm.run1();
         }
        }, vm.data.interval);
      },
      playMusic: function () {
        let audio = this.data.audioList[this.data.audioIndex];
        let manager = wx.getBackgroundAudioManager();
        manager.title = audio.name || "音频标题";
        manager.epname = audio.epname || "专辑名称";
        manager.singer = audio.author || "歌手名";
        manager.coverImgUrl = audio.poster;
        // 设置了 src 之后会自动播放
        manager.src = audio.src;
        manager.currentTime = 0;
        let that = this;
        manager.onPlay(function () {
          // console.log("======onPlay======");
          that.setData({
            playStatus: true
          })
          that.countTimeDown(that, manager);
        });
        manager.onPause(function () {
          that.setData({
            playStatus: false
          })
          // console.log("======onPause======");
        });
        manager.onEnded(function () {
          // console.log("======onEnded======");
          that.setData({
            playStatus: false
          })
          setTimeout(function () {
            that.nextMusic();
          }, 1500);
        });
      },
    
      //循环计时
      countTimeDown: function (that, manager, cancel) {
        if (that.data.playStatus) {
          setTimeout(function () {
            if (that.data.playStatus) {
              // console.log("duration: " + manager.duration);
              // console.log(manager.currentTime);
              that.setData({
                progress: Math.ceil(manager.currentTime),
                progressText: that.formatTime(Math.ceil(manager.currentTime)),
                duration: Math.ceil(manager.duration),
                durationText: that.formatTime(Math.ceil(manager.duration))
              })
              that.countTimeDown(that, manager);
            }
          }, 1000)
        }
      },
    
      //拖动事件
      sliderChange: function (e) {
        let manager = wx.getBackgroundAudioManager();
        manager.pause();
        manager.seek(e.detail.value);
        this.setData({
          progressText: this.formatTime(e.detail.value)
        })
        setTimeout(function () {
          manager.play();
        }, 1000);
      },
    
      //列表点击事件
      listClick: function (e) {
        let pos = e.currentTarget.dataset.pos;
        if (pos != this.data.audioIndex) {
          this.setData({
            audioIndex: pos,
            showList: false
          })
          this.playMusic();
        } else {
          this.setData({
            showList: false
          })
          //更改播放状态
          this.playOrpause();
        }
      },
    
      //上一首
      lastMusic: function () {
        let audioIndex = this.data.audioIndex > 0 ? this.data.audioIndex - 1 : this.data.audioList.length - 1;
        this.setData({
          audioIndex: audioIndex,
          playStatus: false,
          progress: 0,
          progressText: "00:00",
          durationText: "00:00"
        })
        setTimeout(function () {
          this.playMusic();
        }.bind(this), 1000);
      },
    
      //播放按钮
      playOrpause: function () {
        let manager = wx.getBackgroundAudioManager();
        if (this.data.playStatus) {
          manager.pause();
        } else {
          manager.play();
        }
      },
    
      //下一首
      nextMusic: function () {
        let audioIndex = this.data.audioIndex < this.data.audioList.length - 1 ? this.data.audioIndex + 1 : 0;
        this.setData({
          audioIndex: audioIndex,
          playStatus: false,
          progress: 0,
          progressText: "00:00",
          durationText: "00:00"
        })
        setTimeout(function () {
          this.playMusic();
        }.bind(this), 1000);
      },
    
      //界面切换
      pageChange: function () {
        this.setData({
          showList: true
        })
      },
    
      //格式化时长
      formatTime: function (s) {
        let t = '';
        s = Math.floor(s);
        if (s > -1) {
          let min = Math.floor(s / 60) % 60;
          let sec = s % 60;
          if (min < 10) {
            t += "0";
          }
          t += min + ":";
          if (sec < 10) {
            t += "0";
          }
          t += sec;
        }
        return t;
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    View Code

    wxss

    .item {
      border: 1rpx solid #eee;
      padding: 10rpx;
      font-size: 11pt;
    }
    
    .active {
      background: #a51515;
      color: #fff;
    }
    
    .background {
      position: fixed;
      left: 0;
      /* top: 0; */
      right: 0;
      bottom: 0;
      /* text-align: center; */
      background: #f5f5f5;
    }
    
    .background .info{
      /* position: fixed; */
      /* top: 140rpx; */
      padding: 3px 18px 2px 108rpx;
      /* padding-left: 60px; */
      height: 21px;
      left: 0;
      right: 0;
      font-size: 12pt;
      color: #353535;
    }
    
    .background .list {
      position: fixed;
      right: 40rpx;
      top: 40rpx;
      width: 60rpx;
      height: 60rpx;
    }
    
    .background .poster {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      margin-top: 400rpx;
    }
    
    .rotate {
      animation: rotate 10s linear infinite;
    }
    
    .rotate-paused {
      animation: rotate 10s linear infinite;
      animation-play-state: paused;
    }
    
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
    
      50% {
        transform: rotate(180deg);
      }
    
      100% {
        transform: rotate(360deg);
      }
    }
    
    .progress {
      /* position: fixed; */
      bottom: 90rpx;
      left: 50rpx;
      right: 50rpx;
      display: flex;
      /* align-items: center; */
      font-size: 10pt;
      color: rgb(87, 49, 49);
      /* text-align: center; */
    }
    
    .progress .bar {
      flex: 1;
      padding: 8rpx 0 22rpx 230rpx;
      margin: 0 20px;
    }
    
    .progress text {
      flex-basis: 90rpx;
    }
    .progress .text1 {
      position: fixed;
      left: 108rpx;
      bottom: 24rpx;
    }
    .progress .text2 {
      position: fixed;
      right: 40rpx;
    }
    
    .buttons {
      position: fixed;
      bottom: 0;
      /* left: 25rpx; */
      /* right: 50rpx; */
      display: flex;
      width: 60px;
      height: 60px;
      z-index: 9999;
      background: #f5f5f5;
    }
    
    .buttons .button {
      position: relative;
      width: 70rpx;
      height: 70rpx;
      left: 25rpx;
      top: 20rpx;
    }
    
    .example {
      display: block;
      width: 100%;
      height: 100rpx;
     }
     
     .marquee_box {
      width: 100%;
      position: relative;
     }
     
     .marquee_text {
      white-space: nowrap;
      position: absolute;
      margin-left: 108rpx;
      overflow: hidden;
      /* top: 0; */
     }
    View Code

    效果

    标题是从右往左滚动的

     因为是需求,这里只显示了音频名称,需要怎样的效果可以通过css样式来调整

  • 相关阅读:
    如何把两个查询语句合成一条 语句
    SpringBoot之springfox(Swagger) (ApiDoc接口文档)
    springboot + swagger
    高等数学(上)第2章——导数与微分
    oracle 常用 sql
    线性代数基础知识(三)—— 矩阵乘法
    Neo4j(一)
    医学知识图谱(二)——应用
    医学知识图谱一
    数学基本概念
  • 原文地址:https://www.cnblogs.com/liangyaofeng/p/15007677.html
Copyright © 2020-2023  润新知