Giter Club home page Giter Club logo

textalivejp / textalive-app-api Goto Github PK

View Code? Open in Web Editor NEW
109.0 5.0 8.0 273 KB

音楽に合わせてタイミングよく歌詞が動く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 Issues

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

昨日の障害の影響かは分かりませんが、歌詞の取得ができなくなりました。(ご対応中でしたらすみません)
歌詞情報を取得してるだろうと思われる処理で、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回線でマジカルミライのサポートページのサンプルを開いてみましたが
 症状は同じだったため、回線の影響でもないと考えております。

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

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

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

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

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

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 を返すよう対応いただけますでしょうか?

ITextUnitのadvance、ascent、descentについて

インターフェースITextUnitのadvance、ascent、descentプロパティについてお伺いします。
https://developer.textalive.jp/packages/textalive-app-api/interfaces/itextunit.html#advance

これらのプロパティはStyled Textにおいて使われている概念だと思いますが、
実際にこちらの中身を使いたい場合に、予めレンダリングやスタイルの指定はどうなさいますでしょうか?

Player を複数生成し、同じタイミングで requestPlay() を実行したものの Player ごとに position の差異が発生する

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

  • 症状
    表題の通り複数の Player.requestPlay() を同一タイミングで実行しても position の値にズレが発生しています。
    これは、Player.timer.position や onTimeUpdate() で取得可能な position いずれのケースでも発生します。

  • 再現方法
    https://github.com/ya2ha4/TextAliveAppAPI_VerificationCode_2023_11_ver1 にて再現コードを用意していますのでご確認いただけますでしょうか。

  • 要望
    過去に Gitter Chat のやり取りにて言及されていた、ユーザ側でロジックの調整できる環境を提供いただくか、現行の Timer クラスにて対応いただけますでしょうか?

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

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

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 サーバからの読み込みでないと困る要素があるなら、仕様として明記するのも一案かとは思います。

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

  • ターミナルにて、コマンドラインを実行したに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

[Feature Request]歌詞の読み情報の取得

フレーズや単語の情報と同様に、歌詞の読みと発声タイミングの情報を一音ずつひらがな又はローマ字で取得できるような機能が欲しいです

onTimeUpdateで歌詞を文字単位で足していくと抜け落ちる文字がある。

歌詞の文字列が入った変数にonTimeUpdateごとにfindCharで文字を足していくようにすると、どうやら更新される時間の狭間にある文字が抜けてしまうようです。少し手前からフェードインさせるのではなく、リアルタイムに表示させたいのですがどうすれば抜けずに表示できるでしょうか。

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

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

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

コードは以下です。

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.