五分钟搭建一个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.morecale.com莫卡乐AI音乐

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

三十六计的笔记

系列文章目录 三十六计的笔记 文章目录 系列文章目录1、瞒天过海2、围魏救赵3、借刀杀人4、以逸待劳5、趁火打劫6、声东击西7、无中生有8、暗渡陈仓9、隔岸观火10、笑里藏刀11、李代桃僵12、顺手牵羊13、打草惊蛇14、借尸还魂15、调虎离山16、欲擒故纵17、抛砖引玉18、擒贼擒王…

牛客NC302 环形数组的连续子数组最大和【中等 动态规划 Java/Go/PHP/C++】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/e9f3282363844355aa51497c5410beee 思路 动态规划 两种情况&#xff08;首位相连的&#xff09;和首位不相连的 首尾相连的可以算最小的连续子数组得出&#xff0c;sum-就是。Java代码 import java.util.*;pub…

第20届文博会:“特别呈现”—周瑛瑾雷米·艾融双个展,著名美术评论家,批评家彭德教授对周瑛瑾作品进行评论

周瑛瑾不是学院派艺术家&#xff0c;但在彩墨画领域的天赋超出中国八大美院的同类型画家。相比具有批判意识的当代艺术&#xff0c;他的彩墨艺术如同我们这个苦难世界的创可贴和安慰剂。当我面对他的彩墨画&#xff0c;首先是惊艳&#xff0c;随之想到屈原的离骚&#xff0c;还…

slint esp32 tokio

源码&#xff1a;https://github.com/xiaguangbo/slint_esp32_tokio cpu 是 esp32c2&#xff0c;屏幕是 ili9341&#xff0c;触摸是 xpt2046&#xff0c;使用 spi 半双工 不使用DMA&#xff08;esp-rs还没支持&#xff09;&#xff0c;SPI 40M&#xff0c;240*320全屏刷新为1.5…

Windows、Linux下,基于QT的打包方法

整理这篇文档的意义在于&#xff1a;自己走了很多弯路&#xff0c;淋过雨所以想为别人撑伞&#xff0c;也方便回顾&#xff0c;仅供参考 ps: 第一次做Windows下打包&#xff0c;用了2小时&#xff0c;第二次20秒第一次做Linux(ubuntu)下打包&#xff0c;用了8小时&#xff0c;…

Linux 内核

查看内核的发行版 $ uname -r 5.4.0-150-genericcd /lib/modules/5.4.0-150-generic, 内核源码所在的位置&#xff1a;/usr/src 这里的内核源码路径&#xff08;–kernel-source-path&#xff09;即为&#xff1a; cd /usr/src/linux-headers-5.4.0-150-generic/ 临时生效: …

JMETER工具:以录制手机app为例

JMETER工具&#xff1a;以录制手机app为例子 JMETER安装和环境配置 pc需要安装jdk&#xff0c;并进行jdk的环境配置&#xff0c;安装好jdk并配置好后&#xff0c;通过命令行输入java –version出现以下界面就表示安装成功&#xff1a; &#xff08;对应的jdk版本不可太低&…

网络通信(二)

UDP通信 特点&#xff1a;无连不是先接、不可靠通信 不事先建立连接&#xff1b;发送端每次把要发送的数据&#xff08;限制在64KB内&#xff09;、接收端IP、等信息封装成一个数据包&#xff0c;发出去就不管了 java提供了一个java.net.DatagramSocket类来实现UDP通信 Dat…

第13章-循迹功能 循迹小车讲解 原理分析 STM32智能小车循迹教程 红外对管使用 PID循迹算法分析

讲解一下我们小车里面的循迹部分&#xff0c;包括红外基础使用&#xff0c;无PID循迹和有PID循迹。 第13章-循迹功能 13.1-非PID循迹功能完成 先红外对管调试 我们这里学习一下&#xff0c;如何实现循迹功能 如何才能让小车沿着黑线运动、要让小车感知到黑线的位置&#x…

【SpringBoot】SpringBoot中防止接口重复提交(单机环境和分布式环境)

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 &#x1f33c;前言 &#x1f512;单机环境下防止接口重复提交 &#x1f4d5;导入依赖 &#x1f4c2;项目结构 &#x1f680;创建自定义注解 ✈创建AOP切面 &#x1f697;创建Conotroller &#x1f4bb;分布…

[CISCN 2024] Crypto部分复现

文章目录 OvOez_rsacheckin浅记一下 迟来的文章 OvO 题目描述&#xff1a; from Crypto.Util.number import * from secret import flagnbits 512 p getPrime(nbits) q getPrime(nbits) n p * q phi (p-1) * (q-1) while True:kk getPrime(128)rr kk 2e 65537 kk …

3d打印问题总结

1.打印拉丝&#xff1a;https://zhuanlan.zhihu.com/p/152221550 解决方案&#xff1a;温度过高&#xff0c;PLA材料材料喷嘴温度一般设置为200度比较合适。

string OJ题

下面分享一下string做题心得 1. 明白字符串中存储的数字为0 8 9与0 8 9 完全不同&#xff0c;字符0其实在串中存储的是48&#xff0c;要有意识的转化。字符串中如果存数字8&#xff0c;意味着存了BS&#xff08;退格&#xff09; 例如1&#xff1a; 算出结果为5&#xff0c;存…

网上打印试卷的步骤是什么

对于学生和家长来说&#xff0c;打印试卷是日常学习中的一项重要需求。那么&#xff0c;如何在网上方便地打印试卷呢&#xff1f;下面&#xff0c;就让我来为您介绍琢贝云打印的试卷打印步骤。 一、选择琢贝云打印的原因 支持多种文件格式打印&#xff0c;包括图片、PPT、PDF、…

20.SkyWalking

一.简介 SkyWalking用于应用性能监控、分布式链路跟踪、诊断&#xff1a; 参考连接如下&#xff1a; https://github.com/apache/skywalking https://skywalking.apache.org/docs/ 二.示例 通过官网连接进入下载页面&#xff1a;https://archive.apache.org/dist/skywalkin…

2024年【T电梯修理】考试内容及T电梯修理新版试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【T电梯修理】考试内容及T电梯修理新版试题&#xff0c;包含T电梯修理考试内容答案和解析及T电梯修理新版试题练习。安全生产模拟考试一点通结合国家T电梯修理考试最新大纲及T电梯修理考试真题汇总&#xff0c;…

k8s中yaml文件配置指定私有镜像仓库

1. yaml文件介绍 2. 如何快速编写yaml文件 1&#xff09;如果有已存在的pod时可以 kubectl get pod xxxxxx -oyaml 2&#xff09;直接假跑一次并查看 kubectl run xxxxxx --image镜像名 --dry-run -oyaml 3&#xff09;查看pod相关描述信息 kubectl explain pod 3. 编写…

linux 安装redis 并设置开机启动

个人实测 流程 1、第一步 先下载redis ** redis地址 https://download.redis.io/releases/选择你想要的版本 我下载的是 如下图 2、第二步:把下载的包放到linux里面 我用的是 XSHELL 和XFTP 放到/usr/local/java路径下 你可以随便放 3、第三步: ** 执行 以下命令 进行解压 t…

js之图表使用

今天为了给大家演示图表的使用,今天展示下切换图形的修改属性快速修改 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><script src"./js/jquery-3.7.1.js"></script><script src…

Llama 3没能逼出GPT-5!OpenAI怒“卷”To B战场,新企业级 AI 功能重磅推出!

Meta 是本周当之无愧的AI巨星&#xff01;刚刚推出的 Llama 3 凭借着强大的性能和开源生态的优势在 LLM 排行榜上迅速跃升。 按理说&#xff0c;Llama 3在开源的状态下做到了 GPT-3.7 的水平&#xff0c;必然会显得用户&#xff08;尤其是企业用户&#xff0c;他们更具备独立部…