Ramp

概要 IIIFを用いたAudio/Visual資料の記述について、複数のvttファイルを記述する方法に関する備忘録です。 ここでは、以下のように、日英の文字起こしテキストを記述します。 https://ramp.avalonmediasystem.org/?iiif-content=https://nakamura196.github.io/ramp_data/demo/3571280/manifest.json マニフェストファイルの記述 以下に例を格納しています。 https://github.com/nakamura196/ramp_data/blob/main/docs/demo/3571280/manifest.json 以下の記事も参考にしてください。 具体的には、以下のように複数のアノテーションとして記述することで、rampビューアによって正しく処理されました。 " a n n o t a ] t i { } o n " " " ] s i t i " d y t { } { } : " p e , : e m " " " } " " } " " " " } " " } " [ " s i t l , m b , t i t l , m b , t " : " d y a " ] o o " " " " } a d y a " ] o o " " " " } a h : " p b j t d i t f l r " p b j t d i t f l r t " : e e a " i y d y o a " ] g : e e a " i y d y o a " ] g t A [ " l " 日 v " " p r b j e " l " E v " " p r b j e p n " : " : 本 a : : e m e a " t " : " : n a : : e m e a " t s n h : 語 t " a l " 日 " h : g t " a l " E " : t " [ i { " : t " : 本 : t " [ l i { " : t " : n : t t A { ( o h " : 語 t A { i o h " : g / a p n m n t " : [ " p n s n t " : [ l " n t s n a " t T { ( h s n h " t T { i h a i : c : p e " m t : : p e " s t k o t h s x t a t t ( s x t h t a n / a i " : t e c p / a m " : t e p m P n t n s / " x h s n t a s / " x ( s u a a i e u / , t i : a i c u / , t m : r g k o - p n / n / k o h p n / a / a e a n g p a v e / a n i p a v c / 1 " m " e l k t - n m " n l k t h n 9 , u , n e a t g a u , e e a t i a 6 r e m m " e k r - m m " n k . a r e u , n a a g e u , e a g 1 a n r e m 1 e n r - m i 9 t t a r u 9 n t a g u t 6 e i 1 a r 6 e i 1 e r h . d n 9 t a . r n 9 n a u g ) g 6 e 1 g a g 6 e 1 b i " " . d 9 i t " . r 9 . t , g ) 6 t e , g a 6 i h i " . h d i t . o u t g u ) t e g / b h i b " h d i r . u t . u ) t a i b h i b " h m o . u o . u p / i b / i b _ r o . r o . d a / i a / i a m r o m r o t p a / p a / a _ m r _ m r / d p a d p a d a _ m a _ m e t d p t d p m a a _ a a _ o / t d / t d / d a a d a a 3 e / t e / t 5 m d a m d a 7 o e / o e / 1 / m d / m d 2 3 o e 3 o e 8 5 / m 5 / m 0 7 3 o 7 3 o / 1 5 / 1 5 / c 2 7 3 2 7 3 a 8 1 5 8 1 5 n 0 2 7 0 2 7 v / 8 1 / 8 1 a c 0 2 c 0 2 s a / 8 a / 8 / n 3 0 n 3 0 p v 5 / v 5 / a a 7 c a 7 c g s 1 a s 1 a e / 2 n / 2 n / a 8 v a 8 v 2 n 0 a n 0 a " n . s n _ s , o v " o e " t t t n a t a . t " t v i , i t o o t n n " / / , w w e e b b v v t t t t " / , 2 " , なお、Cloverでは、2つの文字起こしテキストが連続して表示されました。 ...

概要 Rampのカスタマイズ方法に関する備忘録です。カスタマイズの結果、以下のように、UIの一部を日本語化し、メディアプレイヤーとメタデータおよび文字起こしを左右に並べて表示します。また、クエリパラメータtを使って、音声の再生開始時間を指定できるようにします。 例えば、以下のURLから、140秒時点から再生することができます。 https://ramp-iiif.vercel.app/?iiif-content=https://nakamura196.github.io/ramp_data/demo/3571280/manifest.json&t=140 以下がカスタマイズ前です。 セットアップ 以下の記事の参考にしてください。 カスタマイズ 音声の再生開始時間の指定 以下のマニュアルにおいて、startCanvasTimeプロパティが使えることがわかります。 https://samvera-labs.github.io/ramp/#!/IIIFPlayer そこで、以下のindex.jsファイルに対して、startCanvasTimeをクエリパラメータから取得する処理を追加します。 i i i c } c } R m m m o ; o e > p p p n c l i } r n c i } r a m , o o o i s e f e s o f e c a r r r m t n t u t t n r t t n d t t t p s l ( r u s ( e u D i o o m t e u p l r s t p t r O f c R R A r a t r a n t a u n M e u e e p t n p l r = a p r r . s m a a p i a u a u r a a n 0 r t e c c c f r r = m p r t r m ; e U n t t f o e a l s a l C a s p n R t D r n s m " . r ; a m . a d L . f O o f t s = h h a n s h r e = g r M m i U t a m v a s r { e o g R = ` t s s a = s e ( m t m f L $ p ( . s ( F < a E r f n { s ' g T n ' l A n l ' o / r = e c : i e i e t o p i e r m a o w o / i t m w ' a p f m e p m n / i ( e ) t e e a ' p U f n f ' U ) ( s n c r ' R i a - i = R p t t t e ; = L g k c i L { a U B ' a / > S . a o i S r R y ; c c e u m n f e a L I t o { a r u t - a m ( d - n r l r e c = r s ) ( d f c } a n o > c . } ' o i h / 1 t n h g r m g P m 9 ' t { P e s o ' ' a a 6 ) e a t t o ; ; r n . ) n r ( a t a i g t a ' r ' m f i { ' m t t ) s e t ) s ' C ) ( s h ; ( ) a ; w t u w ) n i s b i ; v n / . n a d $ i d s o { o o T w c w i . r . m l n a l e o f m o = c i p c { a g _ a s t . d t t i e a i a o n t o r n v a n t . } . C s d s a e l e e n a u m a v r n o r a c c / c s h h 3 h T ) r 5 ) i ; o 7 ; m o 1 e m 2 ( _ 8 ) m 0 } a / n m n a e n r i s f . e j s s t o . n j ` s ; o n " そして、app.jsに対して、startCanvasTimeプロパティを与えます。これにより、クエリパラメータから、メディアの再生開始時間を指定できます。 ...

概要 Rampをローカルで起動してみましたので、備忘録です。 背景 Rampは以下のように説明されています。 Interactive, IIIF powered audio/video media player React components library. （日本語訳）インタラクティブな、IIIF対応のオーディオ/ビデオメディアプレイヤーReactコンポーネントライブラリ 以下のGitHubリポジトリでソースコードが公開されています。 https://github.com/samvera-labs/ramp 起動 以下で起動できました。 g p p i n n t p p m m c l i d o e n m e o h t t p s : / / g i t h u b . c o m / s a m v e r a - l a b s / r a m p 以下に記載があります。 ...