五分钟搭建一个Suno AI音乐站点

五分钟搭建一个Suno AI音乐站点

在这个数字化时代,人工智能技术正以惊人的速度改变着我们的生活方式和创造方式。音乐作为一种最直接、最感性的艺术形式,自然也成为了人工智能技术的应用场景之一。今天,我们将以Vue和Node.js为基础,利用现有的API来快速搭建一个Suno AI音乐站点。让我们一起探索这个令人兴奋的过程吧!

一、准备工作

在动手之前,我们需要确保已经准备好了必要的环境和工具:

Vue和Node.js环境:确保你的开发环境中已经配置好了Vue和Node.js,这将是我们构建前端和后端的基础。

文本编辑器或IDE:选择你熟悉和喜欢的文本编辑器,如VS Code、Sublime Text等。

Suno AI音乐API密钥:这是我们生成音乐所需的关键。这里我们选择的是Acedata提供的Suno API,注册方法如下:

我们先到 Suno Audios Generation API 页面申请Suno API 服务:

如果你尚未登录或注册,会跳转到登录页面邀请您来注册和登录,注册登录之后会自动返回当前页面。

在首次申请时会有免费额度赠送,可以免费使用该 API。申请了API后,在 Credentials 查找到 Token,点击复制这个值备用,类似这样的:8125d23343388839c6e

好了,现在,我们获得了Suno API,下面就可以来快速的搭建AI音乐生成平台了。

二、搭建前端和后端

1. 创建Vue项目

为了更清晰地组织前端和后端代码,我们将项目目录结构分为两个主要部分:frontend和backend。以下是具体的目录结构和说明:

目录结构
suno-music-site/
│
├── backend/
│   ├── node_modules/
│   ├── package.json
│   ├── package-lock.json
│   └── server.js
│
├── frontend/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── App.vue
│   │   ├── main.js
│   ├── package.json
│   ├── package-lock.json
│   └── vue.config.js
│
└── README.md

我们创建一个 suno-music-site 目录。

2. 创建后端

创建后端目录和文件,在项目根目录下创建 backend 目录,并进入该目录:

mkdir backend
cd backend

初始化Node.js项目

在backend目录下初始化Node.js项目:

npm init -y

安装Express和其他依赖
安装Express和所需的依赖包:

npm install express body-parser node-fetch

创建server.js
在backend目录下创建server.js文件,并添加以下代码:

const express = require('express');
const bodyParser = require('body-parser');
const fetch = require('node-fetch').default; // 使用CommonJS版本的node-fetch
const cors = require('cors'); // 引入cors中间件const app = express();
const PORT = 3000;app.use(cors()); // 使用cors中间件
app.use(bodyParser.json());app.post('/generate-music', async (req, res) => {const { prompt } = req.body;const options = {method: "post",headers: {"accept": "application/json","authorization": "Bearer 6675520380424c0167881d69c6e","content-type": "application/json"},body: JSON.stringify({"prompt": prompt})};try {const response = await fetch("https://api.acedata.cloud/suno/audios", options);const data = await response.json();        res.json(data);} catch (error) {console.error(error);res.status(500).json({ error: 'An error occurred' });}
});app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});
3. 创建前端

回到项目根目录,创建frontend目录,并进入该目录:

cd ..
mkdir frontend
cd frontend

创建Vue项目
使用Vue CLI创建Vue项目:

vue create .

选择默认配置或根据你的需要进行配置。

编写前端代码
我们创建一个简单的界面来接收用户输入并显示生成的音乐。

在frontend/src目录下,修改App.vue文件,添加以下代码:

<template><div id="app"><header><h1>XiaoZhi AI Music Generator</h1></header><main><div class="input-container"><input type="text" v-model="musicTitle" placeholder="Enter a prompt for the music"><button @click="handleGenerateMusic" :disabled="loading">生成音乐</button></div><div v-if="loading" class="loading">Music is being generated for you, please wait...</div><div v-if="musicGenerated" class="music-container"><div v-for="music in generatedMusic" :key="music.id" class="music-item"><h2>{{ music.title }}</h2><img :src="music.image_url" alt="Music Image"><p class="lyric">{{ music.lyric }}</p><audio controls class="audio" @play="stopOtherMedia($event)"><source :src="music.audio_url" type="audio/mpeg">Your browser does not support the audio element.</audio><video controls class="video" @play="stopOtherMedia($event)"><source :src="music.video_url" type="video/mp4">Your browser does not support the video element.</video></div></div><div v-if="showModal" class="modal"><div class="modal-content"><p>{{ modalMessage }}</p></div></div></main></div>
</template><script>
import axios from 'axios';export default {data() {return {musicTitle: '',musicGenerated: false,generatedMusic: [],loading: false,currentPlayingMedia: null,showModal: false,modalMessage: ''};},mounted() {document.title = "XiaoZhi AI Music Generator";},methods: {handleGenerateMusic() {if (!this.musicTitle) {this.showModalMessage('请输入生成音乐的提示语');return;}this.generateMusic();},generateMusic() {this.loading = true;this.musicGenerated = false;axios.post('http://localhost:3000/generate-music', { prompt: this.musicTitle }).then(response => {this.loading = false;this.musicGenerated = true;this.generatedMusic = response.data.data;}).catch(error => {this.loading = false;console.error('Error generating music:', error);});},stopOtherMedia(event) {if (this.currentPlayingMedia && this.currentPlayingMedia !== event.target) {this.currentPlayingMedia.pause();this.currentPlayingMedia.currentTime = 0;}this.currentPlayingMedia = event.target;},showModalMessage(message) {this.modalMessage = message;this.showModal = true;setTimeout(() => {this.showModal = false;}, 2000);}}
}
</script><style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}header {background-color: #42b983;padding: 20px;color: white;
}main {margin: 20px;max-width: 80%;margin: 20px auto;
}.input-container {display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 20px;
}input[type="text"] {padding: 7px;margin-right: 10px;font-size: 1em;flex: 1;max-width: 600px;
}button {padding: 8px 20px;background-color: #007bff;color: #fff;border: none;cursor: pointer;font-size: 1em;border-radius: 4px;
}button:disabled {background-color: #d3d3d3;cursor: not-allowed;
}button:hover:not(:disabled) {background-color: #0056b3;
}.loading {font-size: 1.2em;color: #42b983;margin-top: 20px;
}.music-container {display: flex;flex-wrap: wrap;gap: 20px;
}.music-item {flex: 1;min-width: 300px;max-width: 45%;margin-top: 20px;padding: 20px;border: 1px solid #ddd;border-radius: 8px;background-color: #f9f9f9;text-align: left;
}.lyric {font-size: 1.2em;margin: 10px 0;white-space: pre-line;
}.audio {width: 100%;margin-top: 10px;
}.video {width: 100%;height: auto;margin-top: 10px;
}.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.5);
}.modal-content {background-color: white;padding: 20px;border-radius: 5px;text-align: center;font-size: 1.2em;
}@media (max-width: 600px) {.input-container {flex-direction: column;}input[type="text"] {margin-right: 0;margin-bottom: 10px;max-width: 100%;     }.music-item {max-width: 100%;}
}@media (min-width: 601px) {.video {width: 100%;margin: 10px auto;}
}
</style>
4. 解决跨域问题

在你的项目运行中,可能会出现跨域请求的问题,我们需要解决它。
你可以在现有的 vue.config.js 文件中添加开发服务器代理配置,以解决跨域问题。以下是修改后的 vue.config.js 文件内容:

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,devServer: {proxy: {'/generate-music': {target: 'http://localhost:3000',changeOrigin: true}}}
})

这样配置后,当前端发起请求到/generate-music时,代理服务器会将请求转发到运行在 http://localhost:3000 的后端服务,从而解决跨域问题。

如果还无法解决的话,你可能还需要处理一下。由于浏览器安全策略的限制,前端和后端运行在不同的域(例如,localhost 和 192.168.0.235)时,浏览器会阻止跨域请求。我们需要在后端服务器中设置适当的CORS头信息来允许跨域请求。

你可以使用 cors 中间件来解决这个问题。

安装 cors 包:

npm install cors

在 server.js 文件中引入并使用 cors 中间件:

这样,后端服务器将允许来自所有来源的请求。如果你想限制特定来源的请求,可以这样配置 cors 中间件:

app.use(cors({origin: 'http://192.168.20.235:8081' // 允许的前端URL
}));

这样应该能解决CORS问题,并允许前端正常调用后端API。

如果Node.js 无法直接使用 ES 模块(ES Module)加载 node-fetch,因 node-fetch 是一个 ES 模块。解决这个问题的一种方法是将 node-fetch 替换为一个可以在 CommonJS 环境中使用的版本。

你可以安装 node-fetch 的 CommonJS 版本,并修改 server.js 文件中的引入方式。
首先,删除项目中已安装的 node-fetch:

npm uninstall node-fetch

安装 node-fetch 的 CommonJS 版本:

npm install node-fetch@2

在 server.js 文件中,将引入方式修改为动态引入(dynamic import),上面的代码已经修改好了。

三. 运行项目

  1. 启动后端服务

在backend目录下,启动后端服务:

node server.js
  1. 启动前端服务
    在frontend目录下,启动前端服务:
npm run serve

打开浏览器,访问http://localhost:8080(Vue CLI默认端口),你将看到一个简单的界面,输入一个提示词并点击“Generate Music”按钮,即可生成音乐。

默认会生成两首音乐,有 MP3 和 MP4 视频,点击即可播放 AI 生成的音乐。

点击以下音频或视频链接试听:

您的浏览器不支持 audio 元素。

播放/暂停

您的浏览器不支持 video 元素。

播放/暂停

https://cdn1.suno.ai/ab8dcd9b-3527-46da-b0c7-4d1a78b51846.mp3

https://cdn1.suno.ai/3cbd5b7b-7354-48a3-8158-9cd87e1b116b.mp4

MP3试听

MP4试看

四、结语

通过这种方式,我们成功地将前端和后端代码分离,清晰地组织在不同的目录下,同时也实现了跨域请求。希望这个项目能给你带来启发,并帮助你更好地理解和实现类似的项目。

这样我们就搭建好了一个本地的AI音乐生成平台,如果你愿意,可以将代码打包后上传到服务器,再绑定一个域名,就可以提供给其他小伙伴一起来使用了。

通过Vue和Node.js,以及Acedata提供的Suno AI音乐API的强大功能,我们在短短的时间内成功搭建了一个AI音乐生成网站。这个过程不仅展示了人工智能技术在音乐创作中的威力,也向我们展示了如何利用现有的技术来创造出令人惊叹的新体验。希望这个项目能够激发你的创造灵感,并让你更加深入地探索人工智能与音乐的奇妙结合!

在线体验站点:

http://suno.mytime.run 莫卡乐AI音乐

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841957.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【软件设计师】计算机组成原理

1、数据的表示 1.1 进制转换 整型有4种进制形式&#xff1a; 1.十进制&#xff08;D&#xff09;&#xff1a; 都是以0-9这九个数字组成&#xff0c;不能以0开头。 2.二进制&#xff08;B&#xff09;&#xff1a; 由0和1两个数字组成。 3.八进制&#xff08;O&#xff09;&am…

嵌入式进阶——数码管

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 数码管结构移位寄存器原理图移位寄存器数据流程移位寄存器控制流程移位寄存器串联实现数码管显示 数码管结构 共阴与共阳 共阳数码…

前端后端是什么

前端和后端是软件开发中的两个主要部分&#xff0c;它们共同构成了一个完整的应用程序或网站。下面是对前端和后端的简要介绍&#xff1a; 前端&#xff08;Frontend&#xff09; 前端开发指的是应用程序或网站用户界面&#xff08;UI&#xff09;和用户体验&#xff08;UX&a…

sudo和su都莫名其妙无法使用时

不要慌&#xff0c;因为大部分解答都需要sudo去申请权限&#xff0c;所以我们只能重启进入grub界面。 重启时按住shift或者esc,进入后&#xff0c;按↓选中advanced options&#xff0c;enter 点e进入cmd 在输入你的密码后&#xff0c;按照步骤输入&#xff1a; mount -o r…

ESP8266,51单片机,ESP32,Arduino,STM32系列,Raspberry Pi 对比,异同点分析,优势分析和代表产品

下面是您提到的几款单片机的详细介绍&#xff0c;包括它们的应用场景、区别、优势和代表产品&#xff1a; 1. ESP8266 应用场景&#xff1a;主要用于WiFi联网项目&#xff0c;如智能家居设备、IoT传感器和无线控制。优势&#xff1a;低成本、内置Wi-Fi功能、低功耗模式&#…

linux centos循环ping网段ip

循环ping&#xff0c;检测ip是否可用&#xff0c;ping通为正在使用yes&#xff0c;no为不通 vim test.sh#!/bin/bash ip"192.168.1."echo "ping log:" > ./ping.txt for i in {1..128} doping -c 1 -w 1 -W 1 $ip$i | grep -q "ttl" &&a…

机器学习KNN算法-鸢尾花分类背后技术详解

引言 K-最近邻&#xff08;KNN&#xff09;算法是一种简单而有效的分类方法&#xff0c;广泛应用于各种分类任务中。本文将详细介绍KNN算法在鸢尾花分类任务中的应用&#xff0c;并通过代码示例来展示其背后的技术精髓。我们将分三大部分来展开&#xff0c;本部分将重点介绍KN…

Android跨进程通信--Binder机制及AIDL是什么?

文章目录 Binder机制Binder是什么&#xff1f;Binder相对于其他几种跨进程通信方式&#xff0c;有什么区别&#xff1f;谈一下 Binder IPC 通信过程&#xff1a;具体的通讯过程是什么&#xff1f;Binder如何处理发送请求与接收请求?Binder是通过什么方式来进行内存映射的&…

linux入门到精通-第十九章-libevent(开源高性能事件通知库)

目录 参考什么是libevent应用核心实现libevent的地基event_base等待事件产生&#xff0c;循环监听event_loop退出循环监听event_base_loopexit创建事件工作流程 安装一&#xff08;源码安装&#xff0c;推荐&#xff09;现在源码配置编译安装验证安装 安装二&#xff08;可能因…

KingbaseES数据库merge语法

数据库版本&#xff1a;KingbaseES V008R006C008B0014 简介 MERGE 语句是一种用于数据操作的 SQL 语句&#xff0c;它能够根据指定的条件将 INSERT、UPDATE 和 DELETE 操作结合到单个语句中。其主要作用是在目标表和源表之间进行数据比较和同步&#xff0c;根据条件的匹配情况来…

高效并发编程:Java阻塞队列深度解析与最佳实践

1.阻塞队列的基本概念与应用场景 1.1 阻塞队列的定义 阻塞队列&#xff08;BlockingQueue&#xff09;是Java并发包中的一个接口&#xff0c;它支持两个附加操作&#xff1a;当队列为空时&#xff0c;获取元素的线程会等待队列变为非空&#xff1b;当队列满时&#xff0c;存储…

RAG概述(二):Advanced RAG 高级RAG

目录 概述 Advanced RAG Pre-Retrieval预检索 优化索引 增强数据粒度 粗粒度 细粒度 展开说说 优化索引 Chunk策略 Small2Big方法 元数据 引入假设性问题 对齐优化 混合检索 查询优化 查询扩展 查询转换 Post-Retrieval后检索 参考 概述 Native RAG&#…

转义字符知识点

转义字符的使用 什么是转义字符&#xff1f; 它是字符串的一部分&#xff0c;用来表示一些特殊含义的字符 比如&#xff1a;在字符串中表现&#xff0c;单引号&#xff0c;引号&#xff0c;空行等等 固定写法 \字符 不同的\和字符的组合表示不同的含义. 常用的转义字符 附…

关于Springboot同时上传文件与其他参数

Springboot同时上传文件与其他参数 http请求数据传递分为请求体和请求参数。跟在url后面的为请求参数&#xff0c;文件上传和json数据放在请求体中。请求参数格式固定&#xff0c;后台可直接解析&#xff1b;请求体中的数据后台需要根据content-type字段按照特定格式解析。con…

shell从入门到精通(23)贪婪匹配、非贪婪以及独占模式

文章目录 贪婪与非贪婪的区别示例贪婪匹配的特点--自动回溯以满足匹配独占模式总结贪婪与非贪婪的区别 在正则表达式中,贪婪匹配和非贪婪匹配是指匹配模式下的不同行为。 贪婪匹配: 贪婪匹配会尽可能多地匹配符合模式的字符。换句话说,它会一直匹配直到无法再匹配为止。例…

springboot vue 开源 会员收银系统 (4) 门店模块开发

前言 完整版演示 前面我们对会员系统 springboot vue 开源 会员收银系统 (3) 会员管理的开发 实现了简单的会员添加 下面我们将从会员模块进行延伸 门店模块的开发 首先我们先分析一下常见门店的管理模式 常见的管理形式为总公司 - 区域管理&#xff08;若干个门店&#xff…

Java实现插入排序、冒泡排序、堆排序、希尔排序、选择排序、优先队列排序、快速排序、归并排序(详细注释,原理解析)

插入排序 package learn;import java.util.Arrays;/** 每次都将当前元素插入到左侧已经排序的数组中&#xff0c;使得插入之后左侧数组依然有序。* 速度优于选择排序*/ public class InsertSort {public static void insertSort(int[] a) {int n a.length;for (int i 1; i &…

Elasticsearch优点和缺点以及要点和难点具体应用

Elasticsearch是一个开源、分布式、实时的搜索和分析引擎,它位于Elastic Stack(以前称为ELK Stack)的核心。以下是关于Elasticsearch的一些主要特点和功能: 1.分布式和可扩展性:Elasticsearch是分布式的,可以轻松扩展到多个节点以处理大规模数据集和高并发请求。通过将数…

C语言 | Leetcode C语言题解之第113题路径总和II

题目&#xff1a; 题解&#xff1a; int** ret; int retSize; int* retColSize;int* path; int pathSize;typedef struct {struct TreeNode* key;struct TreeNode* val;UT_hash_handle hh; } hashTable;hashTable* parent;void insertHashTable(struct TreeNode* x, struct Tr…

C++干货 --类和对象(二)

前言&#xff1a; 上文中&#xff0c;我们介绍了类这一重要知识点&#xff0c;包括为什么要有类、类的使用方法、封装、以及对象实例化。详情可以去看我的文章&#xff1a;写文章-CSDN创作中心C干货 --类和对象(一)-CSDN博客写文章-CSDN创作中心 这篇文章&#xff0c;我们简单…