Inspiration life

ひらめきに従い行動する。

electron

Electron + React でサウンドファイルを再生する方法。

Miyanogawa Yuya
· 20 min read

Electron + React でサウンドファイルを再生する方法。

こんばんは。宮野川です。個人でアプリ開発してます。

現在開発中のToDoアプリで効果音を実装しました。忘備録を書きました。Electron+React+Javascrpt環境でmp3やwavを鳴らす方法です。

開発環境

  • Electron
  • Nextron
  • Javascript
  • React

解決策:: How to play sound files on local file with Electron

  • 音声ファイルはパブリックフォルダに配置する。

メディアファイルを、パブリックフォルダ以外に配置すると、アクセスエラーになります。プログラムで扱う為には、パブリックフォルダに音声ファイルを配置しましょう。

User@pc renderer % tree
.
├── components
│   ├── Config.jsx
│   ├── EndOfDay.jsx
│   ├── HeadBanner.jsx
│   ├── TodayStamp.jsx
│   ├── TodayTodo.jsx
│   └── TodoBox.jsx
├── lib
│   └── theme.js
├── next.config.js
├── pages
│   ├── _app.jsx
│   ├── _document.jsx
│   └── home.jsx
├── public
│   ├── images
│   └── sounds
│       ├── Fast.mp3
│       ├── ink-pen-1.mp3
│       ├── mixkit-typewriter-soft-hit-1366.wav
│       ├── pencil-1.mp3
│       ├── tape-recorder-eject-1.mp3
│       └── writing-signature-2.mp3
└── style
    ├── home.module.css
    ├── todaystamp.module.css
    ├── todobox.module.css
    └── todotday.module.css

* directories, * files

React で音声ファイルを扱い警告が出る場合のFixコード

React でHTML5 Audio API を使うと、警告が出る場合があります。その場合は下記のコードで解決できます。

// audio_player.play()　・・・＊１
// Fix Code
let playPromise = audio_player.play()
if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    })
}

audio_player の作成方(*1)

let audio_player = new Audio()
audio_player.src = "@path to file" // サウンドファイルのパス
audio_player.volume = 0.2 // 音声ファイルの音量
<audio id="audio_player"/>

Electron でサウンドファイルを扱うときに遭遇するバグ一覧

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

  • 原因：パブリックフォルダ以外にリソースファイルを配置していることが原因。
  • 解決策：音声ファイルはパブリックフォルダに配置する。

Not allowed to load local resource electron

  • 原因：パブリックフォルダ以外にリソースファイルを配置していることが原因。
  • 解決策：音声ファイルはパブリックフォルダに配置する。

Promise オブジェクトの中身取得方法。

Miyanogawa Yuya
· 7 min read

Jacascript+Promise オブジェクトの中身取得方法。

こんにちは。宮野川です。個人でアプリ開発してます。

  • promiseオブジェクトを取り出したい。
  • Object Promiseが表示されて中身が見えない。
  • Promiseのデータを取得したい。

この問題の解決策はこちらです。

結論

Promise.resolve('Success').then( function(value) {
  // ここでプロミスオブジェクトの中身をああだこうだする。
  console.log(value)
})

Promiseの後ろにthenを繋げて必要な処理をします。

実際のコード

実際のアプリで使用しているコードはこちらです。

ボタンをクリックすると、インストール先を指定するダイアログを表示する関数群です。

ipcRenderer

const select_folder = () => {
    ipcRenderer.invoke('request_playlists_select_folder')
    .then(function(return_path) {
    console.log(return_path)
    })
}

console.log( return_path ) には、ipcMain で取得したインストール指定先パスの文字列が配列で表示されます。

ipcMain

  ipcMain.handle('request_playlists_select_folder', async ( event ) => {
    const path = dialog.showOpenDialogSync( {
      properties: ['createDirectory', 'openDirectory']
    })
    // console.log(path)
    return path
  })

“dialog.showOpenDialogSync” の戻り値を 変数に代入し、ipcRender に返しています。

ここでは、ユーザーが指定したインストール先フォルダのパスを文字列として返却しています。

実行結果

["/Volumes/Audio"]

参考文献

【2021年】Electron のipcMainでフォルダを開く方法

Miyanogawa Yuya
· 14 min read

Electron のipcMainでフォルダを開く方法

こんにちは。宮野川です。個人でアプリ開発してます。

現在販売中の『PBR Media Player』でプレイリスト機能を実装中に調べたことを、忘備録としてここに残しておきます。

開発環境

  • macOS Big Sur
  • electron 13.1.7
  • react 17.0.2
  • nextron 7.0.0

結論 Renderer

// electron
import { ipcRenderer } from 'electron';
//マテリアルUI 
import { Button } from '@material-ui/core';

function open_folder() {
    const file_path = "/Volumes/Samsung_T5/audio/audio_1.mp3"
    ipcRenderer.send('request_playlists_folder_open', file_path)
}

const Playlists = () => {
    return (
        <>
            <Button
                color="primary"
                onClick={open_folder}
            >TEST</Button>
        </>
    )
}

export default Playlists

結論 Main

import { app , Menu ,dialog , nativeTheme, ipcMain, shell } from 'electron';

//------------------------------------
// IPC Main
//------------------------------------

  ipcMain.on('request_playlists_folder_open',  (event, file_path) => {
    console.log(file_path)
    shell.showItemInFolder(file_path)
  })

//------------------------------------

要点

shell.showItemInFolder(file_path)

フォルダを開く関数。ファイルパスは出来るだけファイル名も含めて欲しいらしい。

ipcRenderer.send(‘request_playlists_folder_open’, file_path)

ipcMain に処理を送る関数。
request_playlists_folder_open はipcMain で使うチャンネル名を書く。
file_path は任意の変数や文字列。

ipcMain.on(‘request_playlists_folder_open’, function() )

ipcMain.on でチャンネルを作成。function() に任意の処理を書く。

経緯

公式ドキュメントに”Note: While the shell module can be used in the renderer process, it will not function in a sandboxed renderer.”とある。アプリはサンドボックス化するので、レンダラー側で実装しても実用に耐えない。そこでipcMain通信を用いたファイル操作の必要が出てきた。

感想

Electron の学習を始めた6ヶ月前は、ipc通信の難易度が高くて実装出来なかった。今改めて公式ドキュメントを見てみると、要点がシンプルで分かり易かった。

参考ドキュメント