hujung hadapan web
tutorial js
Bagaimana untuk membangunkan pemain muzik mudah menggunakan Node.js
Bagaimana untuk membangunkan pemain muzik mudah menggunakan Node.js
Tajuk: Bangunkan pemain muzik ringkas menggunakan Node.js
Node.js ialah persekitaran masa jalan JavaScript sebelah pelayan yang popular, yang membantu pembangun membina aplikasi web berprestasi tinggi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Node.js untuk membangunkan pemain muzik mudah dan memberikan contoh kod khusus.
Pertama, kita perlu memasang Node.js dan npm (pengurus pakej Node.js). Setelah pemasangan selesai, kami boleh mula membuat projek pemain muzik kami.
Buat folder projek dan mulakan npm di bawah folder ini.
mkdir music-player cd music-player npm init -y
Seterusnya, kami perlu memasang beberapa kebergantungan, termasuk Express (rangka kerja aplikasi web Node.js yang popular) dan multer (perisian tengah untuk mengendalikan muat naik fail).
npm install express multer
Buat fail app.js di bawah folder projek, ini akan menjadi fail utama aplikasi Node.js kami. Kami akan menulis kod bahagian belakang pemain muzik kami dalam fail ini.
// 引入所需的模块
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}`);
});Dalam kod di atas, kami mula-mula memperkenalkan modul Express, multer dan laluan dan mengkonfigurasi multer untuk mengendalikan muat naik fail muzik. Kemudian kami menyediakan direktori fail statik supaya sumber statik (seperti CSS, fail JavaScript, dll.) di halaman hadapan boleh diakses. Kemudian kami memproses permintaan GET, kembali ke halaman hujung hadapan dan memproses permintaan POST untuk muat naik fail muzik. Akhirnya kami memulakan pelayan dan mendengar pada port 3000.
Seterusnya, kita perlu mencipta halaman hadapan untuk melaksanakan fungsi pemain muzik. Buat fail index.html di bawah folder projek Ini akan menjadi fail utama untuk halaman hadapan pemain muzik kami. Tulis kod HTML dan JavaScript dalam fail ini.
<!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>Dalam kod di atas, kami mencipta halaman HTML ringkas yang mengandungi fail muzik dan pemain muzik yang dimuat naik, dan menggunakan JavaScript untuk mendengar muat naik fail dan acara penukaran fail muzik.
Akhir sekali, kami perlu meletakkan fail sumber statik (seperti CSS, fail JavaScript, dll.) yang diperlukan oleh pemain muzik dalam folder awam dan memperkenalkan fail sumber statik ini dalam index.html.
Akhir sekali, kami boleh melancarkan aplikasi pemain muzik kami.
node app.js
Lawati http://localhost:3000 dalam penyemak imbas anda dan anda boleh melihat halaman pemain muzik kami. Anda boleh memilih fail muzik dan memuat naiknya, kemudian klik butang main untuk memainkan fail muzik anda.
Melalui pengenalan artikel ini, kami mempelajari cara menggunakan Node.js dan beberapa pakej npm yang berkaitan untuk membangunkan pemain muzik ringkas. Dengan contoh mudah ini, kita dapat melihat kuasa Node.js dalam membina aplikasi web. Saya harap artikel ini dapat membantu anda, terima kasih kerana membaca!
Atas ialah kandungan terperinci Bagaimana untuk membangunkan pemain muzik mudah menggunakan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Empat alat pengaturcaraan berbantukan AI yang disyorkan
Apr 22, 2024 pm 05:34 PM
Alat pengaturcaraan berbantukan AI ini telah menemui sejumlah besar alat pengaturcaraan berbantukan AI yang berguna dalam peringkat pembangunan AI yang pesat ini. Alat pengaturcaraan berbantukan AI boleh meningkatkan kecekapan pembangunan, meningkatkan kualiti kod dan mengurangkan kadar pepijat Ia adalah pembantu penting dalam proses pembangunan perisian moden. Hari ini Dayao akan berkongsi dengan anda 4 alat pengaturcaraan berbantukan AI (dan semua menyokong bahasa C# saya harap ia akan membantu semua orang). https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot ialah pembantu pengekodan AI yang membantu anda menulis kod dengan lebih pantas dan dengan sedikit usaha, supaya anda boleh lebih memfokuskan pada penyelesaian masalah dan kerjasama. Git
Adakah nodejs rangka kerja bahagian belakang?
Apr 21, 2024 am 05:09 AM
Node.js boleh digunakan sebagai rangka kerja bahagian belakang kerana ia menawarkan ciri seperti prestasi tinggi, kebolehskalaan, sokongan merentas platform, ekosistem yang kaya dan kemudahan pembangunan.
Bagaimana untuk menyambungkan nodejs ke pangkalan data mysql
Apr 21, 2024 am 06:13 AM
Untuk menyambung ke pangkalan data MySQL, anda perlu mengikuti langkah berikut: Pasang pemacu mysql2. Gunakan mysql2.createConnection() untuk mencipta objek sambungan yang mengandungi alamat hos, port, nama pengguna, kata laluan dan nama pangkalan data. Gunakan connection.query() untuk melaksanakan pertanyaan. Akhir sekali gunakan connection.end() untuk menamatkan sambungan.
Apakah perbezaan antara fail npm dan npm.cmd dalam direktori pemasangan nodejs?
Apr 21, 2024 am 05:18 AM
Terdapat dua fail berkaitan npm dalam direktori pemasangan Node.js: npm dan npm.cmd Perbezaannya adalah seperti berikut: sambungan berbeza: npm ialah fail boleh laku dan npm.cmd ialah pintasan tetingkap arahan. Pengguna Windows: npm.cmd boleh digunakan daripada command prompt, npm hanya boleh dijalankan dari baris arahan. Keserasian: npm.cmd adalah khusus untuk sistem Windows, npm tersedia merentas platform. Cadangan penggunaan: Pengguna Windows menggunakan npm.cmd, sistem pengendalian lain menggunakan npm.
Apakah pembolehubah global dalam nodejs
Apr 21, 2024 am 04:54 AM
Pembolehubah global berikut wujud dalam Node.js: Objek global: modul Teras global: proses, konsol, memerlukan pembolehubah persekitaran Runtime: __dirname, __filename, __line, __column Constants: undefined, null, NaN, Infinity, -Infinity
Adakah terdapat perbezaan besar antara nodejs dan java?
Apr 21, 2024 am 06:12 AM
Perbezaan utama antara Node.js dan Java ialah reka bentuk dan ciri: Didorong peristiwa vs. didorong benang: Node.js dipacu peristiwa dan Java dipacu benang. Satu-benang vs. berbilang benang: Node.js menggunakan gelung acara satu-benang dan Java menggunakan seni bina berbilang benang. Persekitaran masa jalan: Node.js berjalan pada enjin JavaScript V8, manakala Java berjalan pada JVM. Sintaks: Node.js menggunakan sintaks JavaScript, manakala Java menggunakan sintaks Java. Tujuan: Node.js sesuai untuk tugas intensif I/O, manakala Java sesuai untuk aplikasi perusahaan besar.
Adakah nodejs bahasa pembangunan bahagian belakang?
Apr 21, 2024 am 05:09 AM
Ya, Node.js ialah bahasa pembangunan bahagian belakang. Ia digunakan untuk pembangunan bahagian belakang, termasuk mengendalikan logik perniagaan sebelah pelayan, mengurus sambungan pangkalan data dan menyediakan API.
Bagaimana untuk menggunakan projek nodejs ke pelayan
Apr 21, 2024 am 04:40 AM
Langkah-langkah penggunaan pelayan untuk projek Node.js: Sediakan persekitaran penggunaan: dapatkan akses pelayan, pasang Node.js, sediakan repositori Git. Bina aplikasi: Gunakan npm run build untuk menjana kod dan kebergantungan yang boleh digunakan. Muat naik kod ke pelayan: melalui Git atau Protokol Pemindahan Fail. Pasang kebergantungan: SSH ke dalam pelayan dan gunakan pemasangan npm untuk memasang kebergantungan aplikasi. Mulakan aplikasi: Gunakan arahan seperti node index.js untuk memulakan aplikasi, atau gunakan pengurus proses seperti pm2. Konfigurasikan proksi terbalik (pilihan): Gunakan proksi terbalik seperti Nginx atau Apache untuk menghalakan trafik ke aplikasi anda
