textalivejp / textalive-app-api Goto Github PK

音楽に合わせてタイミングよく歌詞が動くWebアプリケーション（リリックアプリ）を開発できるJavaScript API / JavaScript API for developing web applications that show lyrics synchronized with the music playback (lyric apps)

Home Page: https://developer.textalive.jp

License: Other

textalive lyrics creative-coding typescript-library songle javascript lyric-app

textalive-app-api's Introduction

TextAlive App API

TextAlive App API は、 音楽に合わせてタイミングよく歌詞が動く Web アプリケーション（リリックアプリ） を開発できる JavaScript 用のライブラリです。

この API を使うと、Web 上の楽曲のサビやビートなどの楽曲地図情報を取得したり、Web 上の歌詞のタイミング情報を取得したりできるようになります。そして、一曲のために作り込んだ演出はもちろんのこと、 TextAlive に登録されている様々な楽曲に合わせて動作する演出をプログラミングできます。

English version available in README.en.md.

使い方

TextAlive App API は script タグで Web サイトに読み込んだり、 npm パッケージ textalive-app-api をインストールすることで使えるようになります。

ほとんどの機能のエントリーポイントになる Player クラスの説明はこちらにあります。このクラスを利用するには TextAlive for Developers Web サイトから開発者登録を行い、アプリトークンを取得する必要があります。詳しくは Web サイトをご覧ください。

`script` タグによる読み込み

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/textalive-app-api/dist/index.js"></script>

グローバル変数 TextAliveApp が定義されるので、 const { Player } = TextAliveApp; のように必要なコンポーネントを呼び出して使います。

npm パッケージのインストール

npm install textalive-app-api

import { Player } from "textalive-app-api"; のように必要なコンポーネントをインポートして使います。

開発者向けドキュメント

技術的に分からないことやバグ報告などがあれば、 GitHub Issues か Gitter Chat までお願いいたします。 TextAlive for Developers トップページもぜひご覧ください。

textalive-app-api's People

Contributors

Stargazers

Watchers

Forkers

patomation gitter-badger taisukef asuka-aaa tom4c3 azn-abel ferlli99

textalive-app-api's Issues

findChordのindexが正常に取得できない。

せきこみごはん「Loading Memories」において
document.querySelector("#chord_index").textContent=player.findChord(position).index;
のようにコード進行のindexを取得しようとするとindexが20の次に27に飛びます。何故でしょうか。

TypeScriptでRenderingUnitFunctionのunit引数にtextが定義されていないエラーが出てしまう。

TypeScriptでtextalive-app-apiを利用しているのですが、RenderingUnitFunction型の関数の第2引数unitにtextにアクセスしようとすると以下のようなエラーが発生しました。

Property 'text' does not exist on type 'IRenderingUnit'.ts(2339)

コードは以下です。

const onAnimatePhrase: RenderingUnitFunction = (now, unit) => {
  if (unit.contains(now)) {
    console.log(unit.text) // ここで2339エラー
  }
}

Player を複数生成し、requestPlay() を実行すると楽曲が再生されないことがある

textalive-app-api (ver.0.3.2) を使用している際に下記の症状が発生しています。

症状
new Player() を実行してから onTimerReady() のイベントリスナーが発生するまでに別の Player を生成すると、requestPlay() を実行しても楽曲が再生されません。
この時、すべての Player.requestPlay() は true を返しています。
再現方法
https://github.com/ya2ha4/TextAliveAppAPI_VerificationCode_2023_11_ver1 にて再現コードを用意していますのでご確認いただけますでしょうか。
回避方法
症状の説明にもある通り、onTimerReady() が呼び出されるまで Player の生成を実行しないことで複数の Player が問題なく動作するようになっています。
要望
任意のタイミングで Player を生成しても症状が発生しないよう対応いただけますでしょうか？
また、再生に失敗する場合は requestPlay() が false を返すよう対応いただけますでしょうか？

GET file://api.songle.jp/v2/api.js net::ERR_INVALID_URL

ファイルシステム上に置いた HTML ファイル経由の JavaScript コードで使おうとすると、console に下記のエラーが出ます。

GET file://api.songle.jp/v2/api.js net::ERR_INVALID_URL

再現コードは gist に上げました。
https://gist.github.com/monaka/ee2e262ba008713d49717b8cfd7c35b2

再現環境は ChromeOS Version 86.0.4240.112 (Official Build) (64-bit) 。
他の環境でも再現しそうに思います。

URL scheme が file のとき https で置換すれば解決するような気がしますが、他の兼ね合いで Web サーバからの読み込みでないと困る要素があるなら、仕様として明記するのも一案かとは思います。

Hi! Can you provide documentation in English?

リリックアプリの実装についての質問

ターミナルにて、コマンドラインを実行したにrun devを実行しようとしたら、devファイルが見つからないとのエラーが出ており、開発用サーバの起動というものができませんでしたが、どうすれば良いでしょうか。
また、別件ですが、TextAlive App Debugger」にアクセスして TextAlive App URL 欄に App の URL を入力してください。という、ここでのURLは、どこのURLでしょうか。これはローカルにて動作確認できるものでしょうか。

(base) pcx17007xx:LyricTrail-src-master x17007xx$ npm install textalive-app-api
npm WARN [email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

+ [email protected]
updated 1 package and audited 794 packages in 6.376s

31 packages are looking for funding
  run `npm fund` for details

found 3 vulnerabilities (2 moderate, 1 high)

sh-3.2$ npm install
npm WARN [email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

added 3 packages from 8 contributors and audited 793 packages in 4.287s

31 packages are looking for funding
  run `npm fund` for details

found 312 vulnerabilities (2 low, 7 moderate, 303 high)
  run `npm audit fix` to fix them, or `npm audit` for details
sh-3.2$ npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/x17007xx/.npm/_logs/2021-08-08T03_27_50_369Z-debug.log
sh-3.2$ npm audit fix
npm WARN [email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

+ [email protected]
+ [email protected]
added 1 package from 3 contributors and updated 13 packages in 8.406s

32 packages are looking for funding
  run `npm fund` for details

fixed 309 of 312 vulnerabilities in 793 scanned packages
  2 vulnerabilities required manual review and could not be updated
  1 package update for 1 vulnerability involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
sh-3.2$ npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/x17007xx/.npm/_logs/2021-08-08T03_28_29_410Z-debug.log 
sh-3.2$ npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/x17007xx/.npm/_logs/2021-08-08T03_37_53_487Z-debug.log

Word や Phrase の型宣言が export されていないため、型指定ができない

初めて質問を投げます。
サンプルのコードをTypescriptで書こうとしたとき、Word や Phrase、Video などの重要なクラスの宣言が export されないため、const 宣言などで型を宣言できません。

これらのクラスを export できないかどうか、ご検討をよろしくお願いいたします。

また、型宣言ファイルを調べていたのですが、ITemplateInterpreter インターフェースの定義が見つかりませんでした。
これはどこで定義されているのでしょうか？

突然、歌詞情報が取得できなくなった。

昨日の障害の影響かは分かりませんが、歌詞の取得ができなくなりました。（ご対応中でしたらすみません）
歌詞情報を取得してるだろうと思われる処理で、504Errorが返ってくるので、
サーバに問題があるのではないかと思いissueを書いております。
サーバの問題であれば、私の方では何もできないですが、そうでない場合どのような原因が考えらえるか、ご教授いただけないでしょうか。

ご参考までに具体的なエラーと動作環境を添付いたします。
※Tokenが含まれてそうな出力であったので、マジカルミライのサポートページを開いた際のエラーを添付していますが、私のスクリプトでも同様のエラーがでます。

エラー

Access to XMLHttpRequest at 'https://api.textalive.jp/' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

Access to XMLHttpRequest at 'https://api.textalive.jp/etc/lyrics/token?lyricId=53718' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Failed to load resource: net::ERR_FAILED

Access to XMLHttpRequest at 'https://api.textalive.jp/etc/license?url=https:%2F%2Fpiapro.jp%2Ft%2FHq9Y&token=-1608991360&skipOptoutCheck=true' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://api.textalive.jp/etc/license?url=https:%2F%2Fpiapro.jp%2Ft%2FHq9Y&token=-1608991360&skipOptoutCheck=true net::ERR_FAILED 504

動作環境

OS
- Windows10
httpサーバ
- node v16.14.2 のhttp-server
ブラウザ
- vivaldiブラウザ
- Windows Edgeブラウザ
回線
- 光回線

※自宅回線の問題かと思い、4G回線でマジカルミライのサポートページのサンプルを開いてみましたが
　症状は同じだったため、回線の影響でもないと考えております。

以上です。よろしくお願いいたします。

症状
表題の通り複数の Player.requestPlay() を同一タイミングで実行しても position の値にズレが発生しています。
これは、Player.timer.position や onTimeUpdate() で取得可能な position いずれのケースでも発生します。
再現方法
https://github.com/ya2ha4/TextAliveAppAPI_VerificationCode_2023_11_ver1 にて再現コードを用意していますのでご確認いただけますでしょうか。
要望
過去に Gitter Chat のやり取りにて言及されていた、ユーザ側でロジックの調整できる環境を提供いただくか、現行の Timer クラスにて対応いただけますでしょうか？