How to develop a simple music player using Node.js-JS Tutorial-php.cn

How to develop a simple music player using Node.js

王林

Release： 2023-11-08 21:50:16

Original

1028 people have browsed it

How to develop a simple music player using Node.js

Title: Develop a simple music player using Node.js

Node.js is a popular server-side JavaScript runtime environment that helps developers Build high-performance web applications. In this article, we will introduce how to use Node.js to develop a simple music player and provide specific code examples.

First, we need to install Node.js and npm (the package manager for Node.js). Once the installation is complete, we can start creating our music player project.

Create a project folder and initialize npm in this folder.

mkdir music-player
cd music-player
npm init -y

Copy after login

Next, we need to install some dependencies, including Express (a popular Node.js web application framework) and multer (middleware for handling file uploads).

npm install express multer

Copy after login

Create an app.js file under the project folder, this will be the main file of our Node.js application. We will write our music player backend code in this file.

// 引入所需的模块
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

// 配置multer来处理音乐文件上传
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  }
});
const upload = multer({ storage: storage });

// 设置静态文件目录
app.use(express.static('public'));

// 处理GET请求，返回前端页面
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

// 处理音乐文件上传
app.post('/upload', upload.single('music'), (req, res) => {
  res.send('音乐上传成功');
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
  console.log(`音乐播放器后端服务运行在 http://localhost:${port}`);
});

Copy after login

In the above code, we first introduced the Express, multer and path modules, and configured multer to handle the upload of music files. Then we set up a static file directory so that static resources (such as CSS, JavaScript files, etc.) in the front-end page can be accessed. Then we processed the GET request, returned to the front-end page, and processed the POST request for music file upload. Finally we started the server and listened on port 3000.

Next, we need to create a front-end page to implement the function of the music player. Create an index.html file under the project folder, this will be the main file for our music player front-end page. Write HTML and JavaScript code in this file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音乐播放器</title>
  <style>
    /* 样式 */
  </style>
</head>
<body>
  <input type="file" id="musicFile" accept=".mp3">
  <button id="uploadBtn">上传音乐</button>
  <audio controls id="audioPlayer"></audio>

  <script>
    document.getElementById('uploadBtn').addEventListener('click', () => {
      const fileInput = document.getElementById('musicFile');
      const formData = new FormData();
      formData.append('music', fileInput.files[0]);
      fetch('/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.text())
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error('上传失败', error);
      });
    });

    document.getElementById('musicFile').addEventListener('change', () => {
      const audioPlayer = document.getElementById('audioPlayer');
      audioPlayer.src = URL.createObjectURL(document.getElementById('musicFile').files[0]);
    });
  </script>
</body>
</html>

Copy after login

In the above code, we created a simple HTML page containing uploaded music files and a music player, and used JavaScript to listen for file upload and music file change events.

Finally, we need to place the static resource files (such as CSS, JavaScript files, etc.) required by the music player in the public folder, and introduce these static resource files in index.html.

Finally, we can launch our music player application.

node app.js

Copy after login

Visit http://localhost:3000 in the browser, you can see our music player page. You can select music files and upload them, then click the play button to play your music files.

Through the introduction of this article, we learned how to use Node.js and some related npm packages to develop a simple music player. With this simple example, we can see the power of Node.js in building web applications. I hope this article can be helpful to you, thank you for reading!

The above is the detailed content of How to develop a simple music player using Node.js. For more information, please follow other related articles on the PHP Chinese website!