音乐播放小程序demo

作者: honey缘木鱼 | 来源:发表于2018-05-23 14:11 被阅读41次

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

只介绍一些具体的方法:

1.解析歌词

 // 解码>>中文
  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.播放控制

 // 播放状态控制
  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,请去下载参考!

相关文章

  • 音乐播放小程序demo

    好长时间以来,自己就有个想法为自己写一个音乐播放器小程序,以方便自己的使用,找网上的好多API,找不到,想抓接口,...

  • 音乐播放小程序demo

    好长时间以来,自己就有个想法为自己写一个音乐播放器 小程序 ,以方便自己的使用,找网上的好多API,找不到,想抓接...

  • 音乐类Demo资源大全

    微信小程序Demo:模仿—网易云音乐 微信小程序Demo:心音乐 (仿QQ音乐) 微信小程序Demo:仿 Appl...

  • 微信小程序播放音乐demo

    这个是demo,我就直接上代码和需求了,复制粘贴就能用。 先附上效果图: 需要三张图片: wxml代码:

  • 小程序音乐播放

    wx.onBackgroundAudioPlay(CALLBACK)监听音乐播放。 wx.onBackground...

  • 【总结】2017.02.27

    2017.02.27 - 计划 hbx视频播放控制demo 小程序视频控制 - 实际完成 hbx视频播放控制dem...

  • 小程序API-BackgroundAudioManager简单使

    小程序API使用-BackgroundAudioManager 1. 小程序播放音乐API(背景音乐管理对象Bac...

  • 安枕睡眠小程序改进

    今天修复了安枕睡眠小程序息屏不播放音乐的问题,微信小程序的音频在息屏或离开小程序就会停止播放,而背景音乐不会。因此...

  • 播放本地音乐的小呆萌

    简单做一个播放音乐的小demo: 搭建界面,放三个按钮,播放、暂停、停止 播放音效,因为文件小,所以不需要进行什么...

  • AVAudioPlayer播放音乐

    简单做一个播放音乐的小demo: 搭建界面,放三个按钮,播放、暂停、停止 播放音效,因为文件小,所以不需要进行什么...

网友评论

  • honey缘木鱼:个人审核不通过
    honey缘木鱼:@55997564e616 音乐应该属于生活服务吧 !
    历貔貅咻:@honey缘木鱼 😢我也想做一个这样的,现在正在审核中,我在创建小程序的时候不知道给它选择哪一种分类😷

本文标题:音乐播放小程序demo

本文链接:https://www.haomeiwen.com/subject/xbhrjftx.html