上海外贸网站google建站,西安网站开发,seo是什么意思som,贵阳市公共住宅投资建设集团官方网站历史文章
Suno AI API接入 - 将AI音乐接入到自己的产品中#xff0c;支持120并发任务
Suno Api V4模型无水印开发「灵感模式」 —— 「Suno Api系列」第1篇
Suno Api V4模型无水印开发「自定义模式」 —— 「Suno Api系列」第2篇
Suno Api V4模型无水印开发「AI生成歌词」… 历史文章
Suno AI API接入 - 将AI音乐接入到自己的产品中支持120并发任务
Suno Api V4模型无水印开发「灵感模式」 —— 「Suno Api系列」第1篇
Suno Api V4模型无水印开发「自定义模式」 —— 「Suno Api系列」第2篇
Suno Api V4模型无水印开发「AI生成歌词」 —— 「Suno Api系列」第3篇
Suno Api V4模型无水印开发「续写」 —— 「Suno Api系列」第4篇
Suno Api V4模型无水印开发「获取整首歌」 —— 「Suno Api系列」第5篇
Suno Api V4模型无水印开发「高清音频WAV下载」 —— 「Suno Api系列」第6篇
Suno Api V4模型无水印开发「人声伴奏分离」 —— 「Suno Api系列」第7篇
Suno Api V4模型无水印开发「人声伴奏分离 – 自定义音频」 —— 「Suno Api系列」第8篇
Suno Api V4模型无水印开发「人声伴奏分离 – 网络地址」 —— 「Suno Api系列」第9篇
Suno Api V4模型无水印开发「视频封面编辑」 —— 「Suno Api系列」第10篇
Suno Api V4模型无水印开发「上传参考音频 - 方式一通过二进制流的方式」 —— 「Suno Api系列」第11篇
Suno Api V4模型无水印开发「上传参考音频 - 方式二通过URL的方式」 —— 「Suno Api系列」第12篇
Suno Api V4模型无水印开发「分页获取音乐列表」 —— 「Suno Api系列」第13篇 导读
讲了这么多节的Suno API接口最后还是来实现一下做一个简单的音乐网站。
具体的一个基本效果如下 一、准备工作
在动手之前我们需要确保已经准备好了必要的环境和工具
Vue和Node.js环境确保你的开发环境中已经配置好了Vue和Node.js这将是我们构建前端和后端的基础。
文本编辑器或IDE选择你熟悉和喜欢的文本编辑器如VS Code、Sublime Text等。
Suno AI音乐API密钥这是我们生成音乐所需的关键。
申请和使用
「已经有API的可以跳过此步骤」
要使用Suno AI API首先可以先登录到站点
https://suno4.cn/#/?i8NCBS8_WXTT
点击头像昵称旁边的… ,点击API接入 然后获取请求所需要的凭证
如果你尚未登录或注册会自动跳转到登录页面邀请您来注册和登录登录注册之后会自动返回当前页面。
接口文档
接口文档地址
https://doc.apipost.net/docs/3769af043c83000?localezh-cn
好了现在我们获得了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-fetchconst 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 xxxxxxxxxxx, content-type: application/json }, body: JSON.stringify({ prompt: prompt }) }; try { const response await fetch(https://xxx.xxx.xxx/_open/suno/music/generate, 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 idapp header h1AI Music Generator/h1 /header main div classinput-container input typetext v-modelmusicTitle placeholderEnter a prompt for the music button clickhandleGenerateMusic :disabledloading生成音乐/button /div div v-ifloading classloading Music is being generated for you, please wait... /div div v-ifmusicGenerated classmusic-container div v-formusic in generatedMusic :keymusic.id classmusic-item h2{{ music.title }}/h2 img :srcmusic.image_url altMusic Image p classlyric{{ music.lyric }}/p audio controls classaudio playstopOtherMedia($event) source :srcmusic.audio_url typeaudio/mpeg Your browser does not support the audio element. /audio video controls classvideo playstopOtherMedia($event) source :srcmusic.video_url typevideo/mp4 Your browser does not support the video element. /video /div /div div v-ifshowModal classmodal div classmodal-content p{{ modalMessage }}/p /div /div /main /div/templatescriptimport 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); } }}/scriptstyle 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[typetext] { 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[typetext] { 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-fetch2
在 server.js 文件中将引入方式修改为动态引入dynamic import上面的代码已经修改好了。
三. 运行项目
启动后端服务
在backend目录下启动后端服务
node server.js
启动前端服务
在frontend目录下启动前端服务
npm run serve
打开浏览器访问http://localhost:8080Vue CLI默认端口你将看到一个简单的界面输入一个提示词并点击“Generate Music”按钮即可生成音乐。
默认会生成两首音乐有 MP3 和 MP4 视频点击即可播放 AI 生成的音乐。 历史文章
Suno AI API接入 - 将AI音乐接入到自己的产品中支持120并发任务
Suno Api V4模型无水印开发「灵感模式」 —— 「Suno Api系列」第1篇
Suno Api V4模型无水印开发「自定义模式」 —— 「Suno Api系列」第2篇
Suno Api V4模型无水印开发「AI生成歌词」 —— 「Suno Api系列」第3篇
Suno Api V4模型无水印开发「续写」 —— 「Suno Api系列」第4篇
Suno Api V4模型无水印开发「获取整首歌」 —— 「Suno Api系列」第5篇
Suno Api V4模型无水印开发「高清音频WAV下载」 —— 「Suno Api系列」第6篇
Suno Api V4模型无水印开发「人声伴奏分离」 —— 「Suno Api系列」第7篇
Suno Api V4模型无水印开发「人声伴奏分离 – 自定义音频」 —— 「Suno Api系列」第8篇
Suno Api V4模型无水印开发「人声伴奏分离 – 网络地址」 —— 「Suno Api系列」第9篇
Suno Api V4模型无水印开发「视频封面编辑」 —— 「Suno Api系列」第10篇
Suno Api V4模型无水印开发「上传参考音频 - 方式一通过二进制流的方式」 —— 「Suno Api系列」第11篇
Suno Api V4模型无水印开发「上传参考音频 - 方式二通过URL的方式」 —— 「Suno Api系列」第12篇
Suno Api V4模型无水印开发「分页获取音乐列表」 —— 「Suno Api系列」第13篇
