ViteでGemini APIの音楽生成

この記事は約6分で読めます。
スポンサーリンク

やりたいこと

GoogleのGemini API をNodeJSで使用して、音楽生成を行います。

実装はフロントエンドのみでバックエンドはGoogleを使用します。

GoogleのAPIキーを発行する必要があります。

注意:この記事を書いて時点でGeminiの音楽生成はプレビュー機能です。今後仕様等変更になる可能性があります。

この記事ではNodeJSを用いてクライアントサイドでの実装を行っています。

しかしこの方法はAPI KEYが使用者に漏れる可能性がありますのでGoogleから推奨されていません。

個人的な使用や、実験にとどめてください。

この記事は基本的には以下のページをベースにしています。

しかし下のページのJavascriptの例は記事作成時点では間違っていて動作しません。

Lyria RealTime を使用した音楽生成  |  Gemini API  |  Google AI for Developers
Gemini API で Lyria のリアルタイム音楽生成を使用して構築を開始する

生成した音楽のライセンス

生成した音楽のライセンスは生成者が著作権をもち、生成者の責任の下使用できるという認識です。

ソースは以下のページです。使用する前に最新を確認してください。

Gemini API 追加利用規約  |  Google AI for Developers
スポンサーリンク

準備

API key の作成

以下のページにアクセスしてAPI keyを取得します

Sign in - Google Accounts

プロジェクトの作成

プロジェクトに使用するフォルダを作成します。

コマンドプロンプトを起動して作成したフォルダで以下のコマンドを実行しViteのプロジェクトを作成します。

npm init vite@latest

記事作成時はViteのバージョンは6.3.5でした。

設定を合わせたい場合はバージョンを指定してください。

作成するプロジェクト名を聞かれるので入力します。

(この記事ではmusicとしました)

使用するフレームワークを聞かれるのでVanillaを選択します。

続いて言語はJavaScriptを選択します。

上記でプロジェクトの作成は完了です

ライブラリのインストール

プロジェクトの作成が完了したら必要なライブラリのインストールを行います。

cd Gemini
npm install @google/genai
npm install

以上で準備完了です。

スポンサーリンク

コード修正

例の修正

上にも記したようにオフィシャルのページの例は動作しません。

修正コードは以下の通りです。apiKeyは発行したものに変更してください。 (動作させるにはHTMLからロードする必要があります。)

weightedPrompts: [{ text: ‘piano solo, slow’, weight: 1.0 }],の行の’piano solo, slow’がプロンプトです。好きなものに変更してください。

ただmusicGenerationConfigが設定なのですが、ここを変更しても生成音楽に影響を与えていないようでした。(そもそも動作しないのか、コードが間違っているのかはわかりませんでした)

追記

musicGenerationConfigでの設定方法は正しいようです。(一番わかりやすいBPMは効いているかわかりませんでしたが、onlyBassAndDrumsなんかは効きました。またこちらの設定よりもプロンプトの方が優先なようです。weightのせいかも)

ちなみに公式に更新のための関数がsession.reset_context()と書いていますが、これも間違っています、正しくはsession.resetContext()です。

import { GoogleGenAI } from '@google/genai';

const ai = new GoogleGenAI({
  apiKey: "API Key", // Do not store your API client-side!
  apiVersion: 'v1alpha',
});

const session = await ai.live.music.connect({
  model: 'models/lyria-realtime-exp',
  callbacks: {
    onmessage: async (e) => {
      console.log(e)
    },
    onerror: (error) => {
      console.error('music session error:', error);
    },
    onclose: () => {
      console.log('Lyria RealTime stream closed.');
    }
  }
});

await session.setWeightedPrompts({
  weightedPrompts: [{ text: 'piano solo, slow', weight: 1.0 }],
});
await session.setMusicGenerationConfig({
  musicGenerationConfig: {
    bpm: 200,
    temperature: 1.0
  },
});

await session.play();

生成された音楽の使用

生成された音楽は以下のコールバックに来ます。

    onmessage: async (e) => {
      console.log(e)
    },

以下のページを参考にして音楽を演奏させることができました。

ただ参考にしたコードのライセンス形態がよくわからなかったのでコードの記載は控えます。

Sign in - Google Accounts

流れは以下の通りです

  • e.serverContent.audioChunks[0].data (base64)をバイナリ(int16)に変換
  • バイナリ(int16)をfloat32に変換しAudioBuffer作成
  • 作成したAudioBufferをAudioBufferSourceNodeに設定して鳴らす。
スポンサーリンク

トラブルシューティング

はまったところを箇条書きで書いておきます。

  • 一回のイベントで作成される音楽は短い(1~2秒)なのである程度の長さの音楽を作成するには何度かイベントを受ける必要がある。
  • 1回目のonmessageで来るイベントはSetupのイベントで音楽が含まれない。
  • 永遠に音楽が生成され終わりがない。(曲の終端がない)
  • ユーザのインタラクションがないと音楽はならない。(音楽の生成が完了した時点でボタンを表示しボタンをクリックで音楽が流れるようにして対策しました。)
  • Viteのビルドエラー/古いブラウザでエラーが出ます。これはTop‐levelでawaitをしていることが原因である可能性があります。ビルドエラーの対策としてはコード修正か設定の変更、古いブラウザで動作させる場合にはコード修正が必要です。
スポンサーリンク

結果

Gemini APIを使用して音楽を生成することができました。

スポンサーリンク

参考にさせていただいたサイト

Lyria RealTime を使用した音楽生成  |  Gemini API  |  Google AI for Developers
Gemini API で Lyria のリアルタイム音楽生成を使用して構築を開始する

コメント

タイトルとURLをコピーしました