{"id":910,"date":"2024-03-29T00:18:56","date_gmt":"2024-03-28T15:18:56","guid":{"rendered":"https:\/\/blog.peddals.com\/?p=910"},"modified":"2024-04-03T23:29:48","modified_gmt":"2024-04-03T14:29:48","slug":"intro-to-speech-plus-subtitles-player-flet-app","status":"publish","type":"post","link":"https:\/\/blog.peddals.com\/en\/intro-to-speech-plus-subtitles-player-flet-app\/","title":{"rendered":"Speech + Subtitles (SRT) Player app made with Flet"},"content":{"rendered":"\n

If you have not, try OpenAI’s Whisper, speech-to-text AI. It’s free and works on a personal computer without sending data to the cloud. With my M1 mac mini 16GB RAM, it takes about 90% of the actual length of audio file to complete the transcription, and the accuracy\/quality is also about 90% in Japanese or even better in English. After transcribing multiple types of speeches, I researched and tried various parameter changes to increase the accuracy, but it turned out to be nearly impossible, at least for now. So, I changed my mind and started building an app that I can edit subtitles easily while playing speech audio file simultaneously. In this post, I’m going to introduce the standalone desktop app that I built with Flet, GUI application development framework for Python. l’m going to write another post to share more about the code. For the time being, you can read my code that I added comments as many as I could (GitHub<\/a>).<\/p>\n\n\n\n

Introduction<\/h2>\n\n\n\n

I call the app Speech plus Subtitles Player<\/strong> (SPSP<\/strong> or SPS Player<\/strong>) in English. I named it Jimaku Gokuraku Maru<\/strong> in Japanese (“jimaku” means subtitles), named after an old console game for Famicom, Jigoku Gokuraku Maru (“jigoku” means hell. haha). As my app is an open source software it really does not matter, but I also created a cool logo using a free Japanese font Gen Kai Min Cho<\/a> from Flop Design. Anyways, with SPSP, you can play audio file and edit subtitles (SRT file) generated by Whisper or any other speech-to-text tool quite easily. Subtitles scroll in sync with the audio, and the UI is intuitive.<\/p>\n\n\n\n

\"\"
Needed features are all included. Subtitles above are actual Whisper output of a famous speech by Steve Jobs.<\/figcaption><\/figure>\n\n\n\n

How to use SPSP<\/h2>\n\n\n\n

(See “How to run SPSP<\/a>” below to run the app.) When you load an audio file using the Open Speech File button, if a subtitle file (extension .srt) or text (extension .txt) with the same name exists in the same folder, it will be automatically opened. The Play button plays\/pauses the audio and the subtitles (SRT file) scroll along with the audio. Click on the timestamp to cue there. Click on the subtitle area to edit the text. The edited texts will be overwritten in the same file by clicking on the Save button. The SRT and TXT buttons will exported as separate files.  The 1.5x and Auto scroll switches allow you to turn on\/off 1.5x faster playback speed and automatic scrolling of subtitles (auto scrolling is only available for SRT format). There is currently a known issue<\/strong> where clicking the Open\/Export as button does not open the dialog and the entire app stops working sometimes for some reason. Please be sure to click Save frequently when you’re editing.<\/p>\n\n\n\n

When exporting as TXT<\/strong>, it does not include timestamps, so auto-scrolling within the app is not possible, but it is useful for various purposes such as meeting minutes and reports. SRT<\/strong> is a popular subtitles format (Wikipedia<\/a>), and if the original audio data is a video, it can be imported as subtitles data using video editor software such as DaVinci Resolve<\/a>.<\/pre>\n\n\n\n
Target users and use cases<\/h2>\n\n\n\n
The main target users are those who want to embed subtitles in own videos, typically YouTubers. Also, SPSP is useful for engineers who verify the accuracy of transcription AI, including Whisper, and operators who write conversation reports at call centers. In addition, it can be useful for meeting minutes, or for learning foreign languages (despite the accuracy varies, Whisper supports quite a few languages: Supported languages<\/a> \u200b\u200b).<\/p>\n\n\n\n
How to run SPSP<\/h2>\n\n\n\n
Although I say it’s an “app,” it is currently not possible to build as executable that opens by double-click. You need to set up an environment and run a command to launch SPSP.<\/s> I figured out how to avoid crashing and errors to build this app. Please see my another post if you wan to build.<\/a> If you are using Windows or Linux, you may need to take additional steps, so please refer to the Flet official documentation<\/a>. The code of SPSP is on GitHub:<\/p>\n\n\n\n
https:\/\/github.com\/tokyohandsome\/Speech-plus-Subtitles-Player<\/a><\/p>\n\n\n\n
Clone the code, create a Python virtual environment, and install Flet and Numpy<\/h3>\n\n\n\n
Python version has to be 3.8 or newer (mine is 3.11.7) The example below specifies python 3.11 and uses pipenv<\/code>, but any virtual environment is fine.<\/p>\n\n\n\n
git clone https:\/\/github.com\/tokyohandsome\/Speech-plus-Subtitles-Player.git\ncd Speech-plus-Subtitles-Player\npipenv --python 3.11\npipenv shell\npip install flet\npip install numpy<\/code><\/pre><\/div>\n\n\n\n
Run the app<\/h3>\n\n\n\n
Once the environment is created, you can run the app SPSP with the command below.<\/p>\n\n\n\n
python main.py<\/code><\/pre><\/div>\n\n\n\n
Select audio file<\/h3>\n\n\n\n
After launching, click the Open Speech File button and select an audio file such as MP3 or WAV. The first time on macOS, you will be asked if you want to give access to your Documents folder, so please approve. If there is a file with the same file name and .srt (or .txt) extension in the same folder, it will be loaded automatically. You can also manually load subtitles file after loading an audio file.<\/p>\n\n\n\n
Known issues and limitations<\/h2>\n\n\n\n
I don’t think there are any critical issues, but just in case, you might want to keep copy of subtitles file in a different location before opening in SPSP. Here are some known issues and limitations:<\/p>\n\n\n\n