热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

刚进公司不久,因为公司部门年后业务拓展的关系,可能在年后会被分配到公司的微信公众号组做小程序相关的开发工作,因此写了个微信小程序wx-audio踩坑。目前还有一些功能没有写完:如返

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

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

时间来不及了,快上车!

先上一个运行效果吧!

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

搭建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.jsapp.jsonapp.wxss它们分别描述的小程序的主题逻辑和公共配置部分。

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

  • 数据逻辑控制

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

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

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

  • 生命周期函数

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

详情可见:微信小程序-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。
最后祝大家鸡年大吉吧!


推荐阅读
  • 本文介绍了如何利用摄像头捕捉图像,并将捕获的图像数据保存为文件。通过详细的代码示例,展示了摄像头调用的具体实现方法,适用于多种应用场景,如安全监控、图像处理等。 ... [详细]
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • 本文深入探讨了Go语言中的接口型函数,通过实例分析其灵活性和强大功能,帮助开发者更好地理解和运用这一特性。 ... [详细]
  • 本文详细介绍了如何在 Node.js 环境中利用 Nodemailer 库实现邮件发送功能,包括环境配置、代码实现及常见问题解决方法。 ... [详细]
  • 文章目录前言Program(程序)Identifier(标识符)Literal(字面量)Vari ... [详细]
  • 编译原理中的语法分析方法探讨
    本文探讨了在编译原理课程中遇到的复杂文法问题,特别是当使用SLR(1)文法时遇到的多重规约与移进冲突。文章讨论了可能的解决策略,包括递归下降解析、运算符优先级解析等,并提供了相关示例。 ... [详细]
  • 使用Echarts for Weixin 小程序实现中国地图及区域点击事件
    本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]
  • 小程序的授权和登陆
    小程序的授权和登陆 ... [详细]
  • 兆芯X86 CPU架构的演进与现状(国产CPU系列)
    本文详细介绍了兆芯X86 CPU架构的发展历程,从公司成立背景到关键技术授权,再到具体芯片架构的演进,全面解析了兆芯在国产CPU领域的贡献与挑战。 ... [详细]
  • 2020年9月15日,Oracle正式发布了最新的JDK 15版本。本次更新带来了许多新特性,包括隐藏类、EdDSA签名算法、模式匹配、记录类、封闭类和文本块等。 ... [详细]
  • 在分析Android的Audio系统时,我们对mpAudioPolicy->get_input进行了详细探讨,发现其背后涉及的机制相当复杂。本文将详细介绍这一过程及其背后的实现细节。 ... [详细]
  • 在Android平台中,播放音频的采样率通常固定为44.1kHz,而录音的采样率则固定为8kHz。为了确保音频设备的正常工作,底层驱动必须预先设定这些固定的采样率。当上层应用提供的采样率与这些预设值不匹配时,需要通过重采样(resample)技术来调整采样率,以保证音频数据的正确处理和传输。本文将详细探讨FFMpeg在音频处理中的基础理论及重采样技术的应用。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 对于初学者而言,搭建一个高效稳定的 Python 开发环境是入门的关键一步。本文将详细介绍如何利用 Anaconda 和 Jupyter Notebook 来构建一个既易于管理又功能强大的开发环境。 ... [详细]
author-avatar
普林
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有