300行代碼寫一個音樂播放器小程序

chenatu 發布于2019-08-20 13:56 / 406人閱讀

摘要：項目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代碼，更多關于小程序的內容可見微信小程序開發文檔小程序框架結構微信小程序的入口是根目錄下的它們分別描述的小程序的主題邏輯和公共配置部分。

剛進公司不久，因為公司部門年后業務拓展的關系，可能在年后會被分配到公司的微信公眾號組做小程序相關的開發工作，因此寫了個微信小程序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程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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