こんばんは。宮野川です。個人でアプリ開発してます。
現在開発中の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
- 原因：パブリックフォルダ以外にリソースファイルを配置していることが原因。
- 解決策：音声ファイルはパブリックフォルダに配置する。
Lung on 2020年版 ノルウェーメンサの答えと解説 Exercise 1〜35: “Exercise33について、グルーピングと順番までは同じなのですが 折り返す…” Aug 14, 00:44
Leave a Reply