用 Node.js 制作 SoundCloud 音乐播放器
内容
你好，SoundCloud播放器
演奏音乐
添加功能
审查
大家好，好久没发帖了！这次我要用Node.js做一个SoundCloud音乐播放器，感觉很兴奋，也很高兴你们能来。:) 这个项目的代码可以在我的SweetCode代码仓库里找到，那里还有其他代码。
内容
本文分为三个主要部分。阅读本文将带您完成构建 SoundCloud 音乐播放器的整个过程——从设置“Hello, world”服务器到更改播放器的音量：
- 你好，SoundCloud播放器
- 演奏音乐
- 添加功能
你好，SoundCloud播放器
创建应用程序
我们先来创建server.js文件。这将是我们的 Node.js 服务器，由于大部分工作将在客户端完成，所以本项目中的服务器可以保持简洁。在这个应用中，我将使用 Express 作为极简的服务器框架，并使用 EJS 作为视图引擎。如果您不熟悉如何搭建/运行 Node.js 服务器，请查看这篇文章。
server.js -
var express = require('express');
var app = require('express')();
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', function (req, res) {
res.render("client");
});
app.listen(5000, function () {
console.log('listening on *:5000');
});
应用结构
正如您在第一个路由中看到的，我们将渲染客户端。“客户端”实际上是我们的.ejs文件，它位于名为views 的文件夹中。我们还有一个public文件夹，大部分 JavaScript 代码都将放在这里。以下是当前的文件夹结构：
每当我开始一个新项目时，我喜欢从简单的入手，先弄清楚应该专注于什么。这个项目主要是让浏览器播放 SoundCloud 上的音乐，所以我想暂时保持界面尽可能简洁。我们先在client.ejs文件中添加一个简单的播放按钮（这个按钮可以用来设置音乐播放器，目前它没有任何实际功能！）。
client.ejs -
<body>
<button>Play</button>
</body>
很好，应用现在可以运行了。
演奏音乐
了解 NPM 包和打包
好了，现在到了最精彩的部分！但是我们要怎么做呢？要用什么工具呢？我们可以使用 SoundCloud 原生 API，也可以找找别人为 SoundCloud API 制作的封装包。我打算用Dmitri Voronianski 写的soundcloud-audio npm 包，它看起来很稳定，而且文档也很完善，方便我们上手。
由于这个 npm 包是为服务器端编写的，我们需要使用某种打包工具才能在客户端（浏览器）使用它。你可以在这里找到相关说明。我将使用的打包工具是Browserify。
撰写玩家角色
我们先来编写player.js文件，然后我会演示如何打包并将其与播放按钮一起使用。在public文件夹下，我们创建player.js 文件。在这个例子中，我将使用 Biskwiq 的 mix。
在player.js 文件中，我们首先引入 soundcloud-audio 包并创建播放器。创建播放器需要使用您自己的客户端 ID（我已经从网上抓取了一个供您使用！）。
编辑：此密钥已失效，您需要另找一个！
我们可以给窗口添加一个名为play 的函数，播放器会调用其 resolve 函数，并传入所需 SoundCloud 歌曲的链接。
player.js -
const SoundCloudAudio = require('soundcloud-audio');
const player = new SoundCloudAudio('95f22ed54a5c297b1c41f72d713623ef');
window.play = function () {
player.resolve("https://soundcloud.com/biskwiq/dawntheopus", function (track) {
player.play();
});
}
太好了，现在我们只需要将这段脚本添加到client.ejs文件中，并将其分配给播放按钮，如下所示：
<script src="player-bundle.js"></script>
<body>
<button onclick="play()">Play</button>
</body>
等等！那是player-bundle.js，不是player.js。我们需要创建这个 bundle 文件，才能在客户端使用这个播放器。在项目根目录运行以下命令下载 Browserify：
npm install --save browserify
安装时别忘了使用--save参数！你的软件包需要保存到本地 node_modules 目录下，而不是全局目录下，才能被打包。
现在我们可以通过运行以下命令来打包player.js ：
browserify public/player.js -o public/player-bundle.js
这将指示Browserify获取player.js文件并将其打包，然后将输出文件保存到同一文件夹中，文件名为player-bundle.js。每当我们修改player.js文件时，都需要使用此命令重新打包。再次运行此命令将覆盖现有的打包文件，而不会发出提示。
太棒了！点击播放按钮即可播放这首歌！注意：音量会比较大，因为我们还没有调整音量设置。:)
添加功能
它能播放音乐，但目前功能还不多。我当然希望音乐播放器能有暂停按钮，还能调节音量。开始吧！我首先要把这些按钮添加到client.ejs文件中：
client.ejs -
<script src="player-bundle.js"></script>
<body>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
Volume: <input type="range" min="0" max="100" value="80" class="slider" id="volume-range">
</body>
首先，我们来实现播放器的暂停功能，因为我们在 onclick 事件中引用了它，但它实际上还没有定义。这很简单，我们要用的函数已经在我们创建的播放器常量中了：
player.js -
const SoundCloudAudio = require('soundcloud-audio');
const player = new SoundCloudAudio('95f22ed54a5c297b1c41f72d713623ef');
window.play = function () {
player.resolve("https://soundcloud.com/biskwiq/dawntheopus", function (track) {
player.play();
});
}
window.pause = function () {
player.pause();
}
别忘了重新打包你的player.js文件！
砰！歌曲暂停了！现在我们来设置音量控制，免得又把耳朵震聋了。播放器需要知道音量应该设置成多少，所以我们来创建一个接收音量值的函数。注意，这个音量值必须是小数，我们先传入一个整数，然后除以 100，这样播放器的 setVolume 函数才能使用小数形式。
player.js -
const SoundCloudAudio = require('soundcloud-audio');
const player = new SoundCloudAudio('95f22ed54a5c297b1c41f72d713623ef');
window.play = function () {
player.resolve("https://soundcloud.com/biskwiq/dawntheopus", function (track) {
player.play();
});
}
window.pause = function () {
player.pause();
}
window.setVolume = function (level) {
level = level / 100;
player.setVolume(level);
}
由于我们没有使用按钮来调节音量，所以不能使用 onclick 事件。我们可以获取“音量范围”控件，并在控件获得输入时调用setVolume函数。
client.ejs -
<script src="player-bundle.js"></script>
<body>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
Volume: <input type="range" min="0" max="100" value="80" class="slider" id="volume-range">
</body>
<script>
var volume = document.getElementById("volume-range");
volume.oninput = function () {
setVolume(this.value);
}
</script>
审查
如果你跟着我的步骤操作，恭喜！你刚刚创建了一个 SoundCloud 音乐播放器。你使用了一个基于 Express 的 Node.js 服务器来运行一个打包好的 npm 包，该包封装了 SoundCloud API 的功能。如果你想继续开发这个项目，我有一些建议：
- 为歌曲添加时间轴，以便用户可以更改歌曲的播放时间。
- 添加一些样式，让玩家看起来更好！
- 添加播放队列，以便用户可以添加接下来要播放的歌曲（同时添加“下一首”按钮）。
- 显示当前播放歌曲的封面、歌名和歌手姓名。
- 让播放器在不同浏览器间共享（如果一个用户播放、跳过等操作，网站上的其他用户也会执行相同的操作）。可以了解一下socket.io。
感谢你看到最后。如果你有任何问题，欢迎直接在这里留言/私信我，或者在我的社交媒体账号上联系我：@rhenness 和@ryhenness（大多数平台都有）。:)
如果你喜欢这篇文章，你可能也会喜欢《制作Node.js Twitter机器人：虚假定义》。
文章来源：https://dev.to/ryhenness/making-a-node-js-soundcloud-music-player-315d