20m61 / sc4pe_pre2 Goto Github PK

JavaScript 7.21% CSS 37.51% TypeScript 55.28%

sc4pe_pre2's Introduction

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

sc4pe_pre2's People

Contributors

Watchers

sc4pe_pre2's Issues

Type error: Type 'Uint8Array' is missing the following properties from type 'number[]': pop, push, concat, shift, and 6 more.

iOSのSafariで音声認識しない

全画面のcanvasを作成

three.jsをインストール

リポジトリをクリーンアップ

サウンドリアクティブにする

歌詞を表示

Type 'Float64Array' is missing the following properties from type 'number[]': pop, push, concat, shift, and 6 more.

Run yarn next build
yarn run v1.22.22
$ /home/runner/work/sc4pe_pre2/sc4pe_pre2/node_modules/.bin/next build
⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

  ▲ Next.js 14.2.5

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types ...

./src/components/RandomMesh.tsx
28:18  Warning: Assignments to the 'renderer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Failed to compile.

./src/components/RandomMesh.tsx:89:25
Type error: Conversion of type 'TypedArray' to type 'number[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Float[6](https://github.com/20m61/sc4pe_pre2/actions/runs/9973418723/job/27558705325#step:8:7)4Array' is missing the following properties from type 'number[]': pop, push, concat, shift, and 6 more.

  8[7](https://github.com/20m61/sc4pe_pre2/actions/runs/9973418723/job/27558705325#step:8:8) |
  88 |       // FFTデータに基づいて頂点位置と色を更新
> 89 |       const positions = randomMesh.geometry.attributes.position
     |                         ^
  90 |         .array as number[];
  [9](https://github.com/20m61/sc4pe_pre2/actions/runs/9973418723/job/27558705325#step:8:10)1 |       const colors = randomMesh.geometry.attributes.color.array as number[];
  92 |       let needsUpdate = false;
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.
0s

buildが失敗する

GitHub ActionsでNext.jsビルド時に以下のエラー

Run yarn next build
yarn run v1.22.22
$ /home/runner/work/sc4pe_pre2/sc4pe_pre2/node_modules/.bin/next build
  ▲ Next.js 14.2.5

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types ...
Failed to compile.

./src/app/page.tsx:5:24
Type error: Could not find a declaration file for module 'three'. '/home/runner/work/sc4pe_pre2/sc4pe_pre2/node_modules/three/build/three.module.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/three` if it exists or add a new declaration (.d.ts) file containing `declare module 'three';`

  3 | import Head from 'next/head';
  4 | import { useEffect, useRef } from 'react';
> 5 | import * as THREE from 'three';
    |                        ^
  6 |
  7 | export default function Home() {
  8 |   const mountRef = useRef<HTMLDivElement>(null);
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.

meshを作成

Next.jsを構築

npx create-next-app@latest .

README更新

# sc4pe_pre2

## 概要
sc4pe_pre2は、Three.jsを用いたオーディオビジュアライザーです。Web Audio APIを使用してリアルタイムのオーディオ解析を行い、認識された音声を画面に表示する機能も備えています。

## 特徴
- Three.jsを使用したリアルタイムのオーディオビジュアライゼーション
- 音声認識機能により、認識された単語を画面に表示
- 各種画面サイズに対応したレスポンシブデザイン

## 使用技術
- [Next.js](https://nextjs.org/): サーバーサイドレンダリングおよび静的サイト生成に対応したReactフレームワーク
- [Three.js](https://threejs.org/): ブラウザ上で3Dグラフィックスを作成するためのJavaScriptライブラリ
- Web Audio API: ウェブアプリケーション内でオーディオを処理および合成するためのインターフェース
- Web Speech API: 音声認識および合成のためのインターフェース

## インストール方法

1. リポジトリをクローンします:
    ```bash
    git clone https://github.com/20m61/sc4pe_pre2.git
    cd sc4pe_pre2
    ```

2. 依存関係をインストールします:
    ```bash
    yarn install
    ```

3. 開発サーバーを起動します:
    ```bash
    yarn dev
    ```

4. ブラウザで [http://localhost:3000](http://localhost:3000) を開きます。

## プロジェクト構成

```plaintext
.
├── components
│   └── RandomMesh.tsx      # Three.jsコンポーネント
├── hooks
│   └── useAudioAnalyser.ts # カスタムフック（オーディオ解析）
│   └── useSpeechRecognition.ts # カスタムフック（音声認識）
├── pages
│   └── index.tsx           # メインページコンポーネント
├── public
│   └── favicon.ico
├── styles
│   └── globals.css         # グローバルスタイル
├── README.md
├── package.json
└── tsconfig.json

使用方法

RandomMeshコンポーネント

オーディオデータに基づいて3Dビジュアライゼーションを行うコンポーネントです。頂点の位置と色をオーディオ解析結果に基づいて更新します。

useSpeechRecognitionフック

音声認識を行うカスタムフックです。音声認識結果、リスニング状態、および認識された単語を返します。

貢献方法

リポジトリをフォークします
フィーチャーブランチを作成します (git checkout -b feature/your-feature)
変更をコミットします (git commit -m 'Add some feature')
ブランチにプッシュします (git push origin feature/your-feature)
プルリクエストを開きます

ライセンス

このプロジェクトはMITライセンスの下でライセンスされています。

謝辞

質問やサポートが必要な場合は、issueを開いてください。オーディオデータのビジュアライゼーションをお楽しみください！

プロジェクトページ

sc4pe_pre2 GitHub

./src/components/RandomMesh.tsx:89:25

URL:
https://nextjs.org/telemetry

  ▲ Next.js [14](https://github.com/20m61/sc4pe_pre2/actions/runs/9973418723/job/27558705325#step:8:15).2.5

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types ...

./src/components/RandomMesh.tsx
28:[18](https://github.com/20m61/sc4pe_pre2/actions/runs/9973418723/job/27558705325#step:8:19)  Warning: Assignments to the 'renderer' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Failed to compile.

./src/components/RandomMesh.tsx:89:[25](https://github.com/20m61/sc4pe_pre2/actions/runs/9973418723/job/27558705325#step:8:26)
Type error: Conversion of type 'TypedArray' to type 'number[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Float64Array' is missing the following properties from type 'number[]': pop, push, concat, shift, and 6 more.

  87 |
  88 |       // FFTデータに基づいて頂点位置と色を更新
> 89 |       const positions = randomMesh.geometry.attributes.position
     |                         ^
  90 |         .array as number[];
  91 |       const colors = randomMesh.geometry.attributes.color.array as number[];
  92 |       let needsUpdate = false;
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.