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

ゆうや

2 years ago

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

現在開発中の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

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