Overview
This is a memo on how to customize Ramp. As a result of customization, the UI is partially localized to Japanese, with the media player and metadata/transcription displayed side by side. Additionally, the query parameter t can be used to specify the playback start time for audio.
For example, playback starting from the 140-second mark can be accessed from the following URL.
Below is the pre-customization state.
Setup
Please refer to the following article.
Customization
Specifying Audio Playback Start Time
From the following manual, we can see that the startCanvasTime property is available.
https://samvera-labs.github.io/ramp/#!/IIIFPlayer
We add processing to the following index.js file to retrieve startCanvasTime from a query parameter.
Then, pass the startCanvasTime property to app.js. This allows specifying the media playback start time via query parameter.
Localization and Layout Changes
Similarly to the above, you can localize the UI and change the layout by editing the demo/app.js file.
Deploying to Vercel
Configure the Build & Development Settings as follows.
Set Build Command to npm run demo:build and Output Directory to demo/dist.
Also, it was necessary to set the Node.js Version to 18.x. With 20.x, errors occurred during package installation.
Summary
I am grateful to those involved in the development of Ramp. I hope this serves as a useful reference for using Ramp and the IIIF Presentation API v3.