前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >音乐播放小程序demo

音乐播放小程序demo

作者头像
honey缘木鱼
发布2018-07-12 16:34:30
1.8K0
发布2018-07-12 16:34:30
举报
文章被收录于专栏:娱乐心理测试娱乐心理测试

好长时间以来,自己就有个想法为自己写一个音乐播放器小程序,以方便自己的使用,找网上的好多API,找不到,想抓接口,好多大厂都用了加密。结果自己仅仅整了点本地的数据。

只介绍一些具体的方法:

1.解析歌词

代码语言:javascript
复制
 // 解码>>中文
  reconvert: function (str) {
    str = str.replace(/(\\u)(\w{1,4})/gi, function ($0) {
      return (String.fromCharCode(parseInt((escape($0).replace(/(%5Cu)(\w{1,4})/g, "$2")), 16)));
    });
    str = str.replace(/(&#x)(\w{1,4});/gi, function ($0) {
      return String.fromCharCode(parseInt(escape($0).replace(/(%26%23x)(\w{1,4})(%3B)/g, "$2"), 16));
    });
    str = str.replace(/(&#)(\d{1,6});/gi, function ($0) {
      return String.fromCharCode(parseInt(escape($0).replace(/(%26%23)(\d{1,6})(%3B)/g, "$2")));
    });
    return str;
  },
  // 解析歌词的方法
  parseLyric: function (lrc) {
    var lyrics = lrc.split("\n");
    var lrcObj = {};
    for (var i = 0; i < lyrics.length; i++) {
      var lyric = decodeURIComponent(lyrics[i]);
      var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
      var timeRegExpArr = lyric.match(timeReg);
      if (!timeRegExpArr)
        continue;
      var clause = lyric.replace(timeReg, '');
      if (clause.length > 0) {
        for (var k = 0, h = timeRegExpArr.length; k < h; k++) {
          var t = timeRegExpArr[k];
          var min = Number(String(t.match(/\[\d*/i)).slice(1)),
            sec = Number(String(t.match(/\:\d*/i)).slice(1));
          var time = min * 60 + sec;
          lrcObj[time] = clause;
        }
      }
    }
    return lrcObj;
  },
  // 转换时间格式
  timeToString: function (duration) {
    var str = '';
    var minute = parseInt(duration / 60) < 10
      ? ('0' + parseInt(duration / 60))
      : (parseInt(duration / 60));
    var second = duration % 60 < 10
      ? ('0' + duration % 60)
      : (duration % 60);
    str = minute + ':' + second;
    return str;
  },

2.播放控制

代码语言:javascript
复制
 // 播放状态控制
  songPlay: function () {
    clearInterval(timer);
    var timer = setInterval(function () {
      // 获取后台音乐播放状态
      wx.getBackgroundAudioPlayerState({
        success: function (res) {
          // 播放状态 1表示播放中
          if (res.status == 1) {
            that.setData({
              isPlaying: true,
              songState: {
                progress: res.currentPosition / res.duration * 100,
                currentPosition: that.timeToString(res.currentPosition),
                duration: that.timeToString(res.duration)
              }
            });
            var i = that.data.currentIndex
            if (i < that.data.lyric.length) {
              if (res.currentPosition - 4 >= parseInt(that.data.lyric[i][0]))          {
                that.setData({
                  currentIndex: i + 1
                })
              }
            }
            if (that.data.currentIndex >= 5) {
              that.setData({
                scrollTop: (that.data.currentIndex - 5) * 20,
              })
            }
          } else {
            that.setData({ isPlaying: false });
            clearInterval(timer);
          }
        }
      });
    }, 1000);
  },

具体项目我已经放https://github.com/dt8888/JokeProject,请去下载参考!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.05.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档