300行代码写一个音乐播放器小程序

chenatu 发布于2019-08-20 13:56 / 390人阅读

摘要：项目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代码，更多关于小程序的内容可见微信小程序开发文档小程序框架结构微信小程序的入口是根目录下的它们分别描述的小程序的主题逻辑和公共配置部分。

刚进公司不久，因为公司部门年后业务拓展的关系，可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作，因此写了个微信小程序wx-audio踩坑。目前还有一些功能没有写完：如返回多首歌曲、控制播放时间等，可能在年后继续完成。

项目主要是微信小程序、也用到了node、express等。

~~时间来不及了，快上车！~~

先上一个运行效果吧!

搭建node中间层

最近对搭建node中间层也有一定的思考，可见我最近刚写的文章：NodeJS搭建中间层

之所以选择NodeJS搭建中间层服务，主要是为了格式化参数、合并请求、节省性能方面所考虑的，现今大公司基本都采用node作为微服务的方式进行项目搭建。具体原因分析可自行谷歌或百度。

首先在node层对后端发起http请求：

// http.js
var formatURL = require("./formatURL.js");
var http = require("http");
const POSThttp = function(request) {
  return new Promise((resolve, reject) => {
    let body = "";
    // http模块拿到真实后台api的数据
    http.get(formatURL(request.body.musicname), function(res) {
      res.on("data", (data) => {
        body += data;
      }).on("end", () => {
        // 格式化
        const {
          name,
          audio: musicUrl,
          page,
          album: {
            name: musicName,
            picUrl,
          },
          artists: [{
            name: singer,
          }],
        } = JSON.parse(body).result.songs[0];
        const reply = {
          name,
          picUrl,
          musicUrl,
          page,
          singer,
        };
        resolve(reply);
      });
    });
  });
};
module.exports = POSThttp;

然后与客户端的交互：

var express = require("express");
var POSThttp = require("./POSThttp.js");
var bodyParser = require("body-parser");
// 使用body-parser解析post请求的参数，如果没有，req.body为undefined。
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.post("/", (req, res) => {
  POSThttp(req).then((data) => {
    res.send(data);
  }).catch((err) => {
    res.send(err);
  });
});
app.listen(3000, () => {
  console.log("open wx-audio server successful!")
});

前端部分

主要是歌曲播放控制和交互部分的代码，更多关于小程序的内容可见微信小程序 - 开发文档：

小程序框架结构

微信小程序的入口是根目录下的app.js、app.json、app.wxss它们分别描述的小程序的主题逻辑和公共配置部分。

在pages/目录下，每个文件夹就是一个页面。分别包括js文件、wxml文件、wxss文件。它们分别描述数据逻辑、静态页面模板和页面样式。

数据逻辑控制

微信小程序采用类似于React的state控制页面数据逻辑，我们不能使用this.data直接改变状态，而是类似于React`，使用this.setData()改变页面数据逻辑。

在本项目中定义的如下数据逻辑

  data: {
    name: "", // 歌曲名称
    musicUrl: "", // 歌曲链接地址
    picUrl: "", // 专辑图片地址
    page: "", // 网易云音乐的歌曲链接
    singer: "", //歌手名称
    input: "", // 输入框的内容
    transform: "", // 旋转动画属性
    rotateFlag: false, // 控制专辑图片旋转
  }

生命周期函数

微信小程序组件有自己的生命周期函数，也是类似于React，每次通过触发一个钩子函数改变状态。如：onLoad、onReady函数等。

详情可见：微信小程序-API

中间的转盘部分

微信小程序并不支持css3自定义的动画，因此我采用JS实现的：

  // 专辑图片旋转函数
  myRotate: function() {
    rotate++;
    let transform = `transform:rotate(${rotate}deg);`;
    this.setData({
      transform,
    });
    const animation = setTimeout(() => {
      this.myRotate();
    }, 30);
    if (!this.data.rotateFlag) {
      clearTimeout(animation);
    };
    
    
  },
  // 控制专辑图片旋转
  toggleRotate: function() {
    if (this.data.rotateFlag) {
      this.pauseMusic();
      this.audioCtx.pause();
    } else {
      this.playMusic();
      this.audioCtx.play();
    }
  },
  // 播放音乐
  playMusic: function() {
    this.setData({
      rotateFlag: true,
    });
    this.myRotate();
  },
  // 暂停播放音乐
  pauseMusic: function() {
    this.setData({
      rotateFlag: false,
    });
  },

交互部分

微信小程序采用特有的wx.request发送http请求，基本用法类似于$.ajax()，传入回调函数。

wx.request({
      method: "POST",
      url: "http://127.0.0.1:3000", //访问node端后台借口
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      data: {
        musicname: musicname,
      },
      success: (res) => {
        const {
          name,
          picUrl,
          musicUrl,
          page,
          singer,
        } = res.data;
        this.setData({
          name,
          picUrl,
          musicUrl,
          page,
          singer,
        });
        console.log(this.data);
      },
      error: () => {
        console.log("err");
      }
    });

最后上源码：wx-audio，欢迎star、欢迎fork、欢迎PR。
最后祝大家鸡年大吉吧！

GPU云服务器云服务器 java写一个音乐类 js代码音乐播放器手机播放音乐代码写一个python程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81327.html

前端知识库 - 收藏集 - 掘金

摘要：自适应的椭圆背景知识属性的基本用法使用样式画各种图形前端掘金下面是一些我在中经常用到的图案，还有一些是在看到的。像图手把手教你使用前端掘金使用教程一是什么是目前世界上最先进的分布式版本控制系统。如何在 Vue.js 中使用第三方库 - 前端 - 掘金在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库....

wall2flower 2019-08-20 17:15 评论0 收藏0
前端知识库 - 收藏集 - 掘金

摘要：自适应的椭圆背景知识属性的基本用法使用样式画各种图形前端掘金下面是一些我在中经常用到的图案，还有一些是在看到的。像图手把手教你使用前端掘金使用教程一是什么是目前世界上最先进的分布式版本控制系统。如何在 Vue.js 中使用第三方库 - 前端 - 掘金在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库....

BetaRabbit 2019-08-29 12:46 评论0 收藏0
指尖一点歌声来--微信小程序之仿网易云音乐心得

摘要：为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。查文档发现，小程序中图片加载完成后，有一个加载完成事件。前者在微信客户端版本就不开始维护了，后者低版本需做兼容处理。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。期间踩过了大把的坑，bug出现的难受和解决bug欢喜，一直是伴随我阶段性学习这个项目的心情。初步完成...

KitorinZero 2019-08-22 11:18 评论0 收藏0
Vue 实现的音乐项目 music app 知识点总结分享

摘要：后两个属性可选。属性定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为，即项目的本来大小。结合的异步组件和的代码分割功能，轻松实现路由组件的懒加载。项目总结这是我第二个用 Vue 实现的项目，下面内容包括了在实现过程中所记录的知识点以及一些小技巧项目演示地址：https://music-vue.n-y.io源...

meteor199 2019-08-26 11:45 评论0 收藏0
css3 动画总结

摘要：如果你做其他的动画，或者动画之类的，一定知道帧这个东西。这个是动画的一个过程，电脑是根据帧，然后渲染得到的一个连续的动画。规定完成动画所花费的时间，以秒或毫秒计。就是播放一次停在最后一帧播放次数和播放完成之后保留的最后的转态。　　原来的时候写过一个小程序，里面有一个播放背景音乐的按钮（也是一个圆形的图片），它是一直在旋转的，当我们点击这个按钮的可以暂停或者播放背景音乐。当初的这个动画，是同事...

XiNGRZ 2019-04-23 13:19 评论0 收藏0