BGM自動作曲AI!!

BGM自動作曲AI!!

AIがHTMLで流せるBGMを自動作曲します。

推奨モデル - GPT 4o
0
0
55
16

投稿日時:

  • プロンプト実行例
BGM自動作曲AI!!

こんにちは!

かっこいい曲

BGM自動作曲AI!!

かっこいいロック調のBGMを生成します。力強いベースラインとエネルギッシュなリズムを特徴としています。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Cool Rock BGM</title>
5    <style>
6        button {
7            padding: 10px 20px;
8            font-size: 16px;
9            margin: 10px;
10        }
11    </style>
12</head>
13<body>
14    <button onclick="startBGM()">Play</button>
15    <button onclick="stopBGM()">Stop</button>
16    <input type="range" min="0" max="100" value="70" oninput="changeVolume(this.value)">
17
18<script>
19let audioContext;
20let gainNode;
21let isPlaying = false;
22let scheduledNotes = [];
23
24const BPM = 140;
25const BEAT_LENGTH = 60 / BPM;
26
27function initAudio() {
28    audioContext = new (window.AudioContext || window.webkitAudioContext)();
29    gainNode = audioContext.createGain();
30    gainNode.connect(audioContext.destination);
31    gainNode.gain.value = 0.7;
32}
33
34function createOscillator(freq, type, startTime, duration) {
35    const osc = audioContext.createOscillator();
36    const oscGain = audioContext.createGain();
37    
38    osc.type = type;
39    osc.frequency.value = freq;
40    
41    oscGain.gain.setValueAtTime(0, startTime);
42    oscGain.gain.linearRampToValueAtTime(0.3, startTime + 0.01);
43    oscGain.gain.linearRampToValueAtTime(0, startTime + duration);
44    
45    osc.connect(oscGain);
46    oscGain.connect(gainNode);
47    
48    return osc;
49}
50
51const bassline = [
52    { note: 49, duration: 0.5 }, // G1
53    { note: 49, duration: 0.5 },
54    { note: 46, duration: 0.5 }, // F#1
55    { note: 49, duration: 0.5 },
56];
57
58const melody = [
59    { note: 73, duration: 0.25 }, // G4
60    { note: 71, duration: 0.25 }, // F4
61    { note: 68, duration: 0.25 }, // D4
62    { note: 71, duration: 0.25 }, // F4
63];
64
65function noteToFreq(note) {
66    return 440 * Math.pow(2, (note - 69) / 12);
67}
68
69function playSequence(startTime) {
70    const sequenceLength = 2; // 2秒で1ループ
71    
72    // ベースライン
73    bassline.forEach((note, index) => {
74        const freq = noteToFreq(note.note);
75        const osc = createOscillator(freq, 'sawtooth', 
76            startTime + index * BEAT_LENGTH, 
77            note.duration);
78        osc.start(startTime + index * BEAT_LENGTH);
79        osc.stop(startTime + index * BEAT_LENGTH + note.duration);
80        scheduledNotes.push(osc);
81    });
82
83    // メロディ
84    melody.forEach((note, index) => {
85        const freq = noteToFreq(note.note);
86        const osc = createOscillator(freq, 'square', 
87            startTime + index * BEAT_LENGTH, 
88            note.duration);
89        osc.start(startTime + index * BEAT_LENGTH);
90        osc.stop(startTime + index * BEAT_LENGTH + note.duration);
91        scheduledNotes.push(osc);
92    });
93
94    // ドラム的なノイズ
95    for (let i = 0; i < 4; i++) {
96        const noiseOsc = createOscillator(150 + Math.random() * 50, 'square', 
97            startTime + i * BEAT_LENGTH, 
98            0.1);
99        noiseOsc.start(startTime + i * BEAT_LENGTH);
100        noiseOsc.stop(startTime + i * BEAT_LENGTH + 0.1);
101        scheduledNotes.push(noiseOsc);
102    }
103
104    if (isPlaying) {
105        setTimeout(() => {
106            playSequence(startTime + sequenceLength);
107        }, (sequenceLength - 0.1) * 1000);
108    }
109}
110
111function startBGM() {
112    if (!audioContext) {
113        initAudio();
114    }
115    if (!isPlaying) {
116        isPlaying = true;
117        playSequence(audioContext.currentTime);
118    }
119}
120
121function stopBGM() {
122    isPlaying = false;
123    scheduledNotes.forEach(osc => {
124        try {
125            osc.stop();
126        } catch (e) {
127            // 既に停止している場合のエラーを無視
128        }
129    });
130    scheduledNotes = [];
131}
132
133function changeVolume(value) {
134    if (gainNode) {
135        gainNode.gain.value = value / 100;
136    }
137}
138</script>
139</body>
140</html>

この実装の特徴:

  1. パワフルなベースライン
  • 低音域でのサwtooth波による力強い音色
  • シンプルながらも印象的なフレーズ
  1. キャッチーなメロディ
  • square波による特徴的な音色
  • リズミカルなパターン
  1. ドラム的な要素
  • ノイズ的な音を使用してリズム感を強調
  • 規則的なパターンでグルーブ感を演出
  1. 音楽理論的な特徴
  • Gマイナーをベースとした調性
  • 4/4拍子の力強いリズム
  • 140BPMの疾走感のあるテンポ

使い方:

  1. Playボタンで再生開始
  2. Stopボタンで停止
  3. スライダーで音量調整可能

注意点:

  • ブラウザの自動再生ポリシーにより、ユーザーインタラクションが必要
  • モバイルデバイスでの動作は端末の性能に依存
  • メモリ使用量を最適化するため、停止時に不要なオシレーターを解放

コメント 0

他のプロンプトもチェック

  • GPTs

    SNS投稿

    ✨ あなただけのクリスマスカード&年賀状を、AIで簡単に作成! ✨ たった3ステップで、オリジナルカードが完成! 1.テンプレートを選ぶ: 紫色の「GPTSを開く」ボタンをクリック(タップ)し、「1. Christmas1」または「2. nenga1」の番号で、クリスマスカードと年賀状のどちらかを選びましょう。 2.画像のイメージを伝える: 「雪降る街並み」や「可愛いウサギ」など、作りたい画像のイメージを具体的に教えてください。 3.AIが自動作成: あとはAIにおまかせ! あなたのイメージに基づいて、AI(DALL-E3)が画像を生成し、選んだテンプレートに自動で合成します。 完成した作品は… ダウンロードして、SNSにアップ! (LINE、Facebook、Instagram、Twitterなど) 大切な人に届けましょう! ※ワード、ドキュメント、Canvaなどで印刷して、送る事も出来ますよ。 【ポイント】 画像のイメージはできるだけ具体的に伝えましょう。 例えば、「雪が降る街並み、サンタクロースがプレゼントを配っている」のように、詳細を伝えることで、よりイメージに近い画像が生成されます。 さあ、AIと一緒に、世界に一つだけのクリスマスカード&年賀状を作りましょう! 🎅🐇🎉
    94
    25
    386
    870
  • GPTs

    SNS投稿

    ターゲットとアカウントの発信内容を入れるだけで、ターゲットが持つ悩みから投稿内容を考えます!  これでもう投稿に悩む必要なし!  実は...🤫㊙️ 気に入った投稿内容が見つかったら 「 (タイトルをコピペ)この内容でインスタグラム用の投稿を考えてください」 と入れると 投稿内容も考えてくれるよ✨ まずは一度、試してみてね!! また使えるようにお気に入り登録♡してこれからのインスタ投稿にどんどん活用してください♪ #インスタグラム #投稿自動作成ツール
    21
    6
    154
    415
  • チャットボット

    推奨モデル - GPT 4o
    AI解析型統合占星術『サイクリカルアストロロジー』は、最新のAI技術を駆使して、占星術、天文学、西洋占星術、サイクリック理論の4つの学問を統合した革新的な占いサービスです。このシステムは、生年月日と星座からカスタマイズされた占星術のアドバイスを提供し、日々の生活に役立つ洞察をお届けします。 特徴: 1. 占星術(Astrology): 太陽、月、惑星の位置と動きに基づき、人の性格や運勢を分析。太陽星座は基本的な性格や人生の方向性を示し、月星座は感情や内面的な欲求を表します。 2. 西洋占星術(Western Astrology): 12星座と黄道十二宮に基づいて個々の運勢を予測。各星座の特性やエレメント(火、地、風、水)を考慮します。 3. 天文学(Astronomy): 惑星や星の位置を計算し、星座の影響を考慮。現在の惑星の配置(トランジット)が個人の運勢にどのように影響するかを分析します。 4. サイクリック理論(Cyclic Theory): 自然界の周期的な変化を基に、個人の運勢を予測。サターンリターン(約29.5年ごとの土星の周期)は人生の転換期を示します。 AI技術の利用: 最先端のAI解析を用いて、天体の動きを精密に計算し、ユーザーの個別データを元にパーソナライズされた占星術のアドバイスを提供します。これにより、従来の占星術よりも精度の高い予測と洞察を実現します。
    3
    0
    33
    128
  • 画像生成

    SNS投稿

    雰囲気のある水彩画を作成します。 前に掲載していたもので、上限いってたみたいです。よかったらどうぞ。 #midjourney #水彩画 #イラスト #お洒落 #簡単
    5
    0
    22
    101