• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Inspiration life

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

  • Contact
  • Author
  • Products

react

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

Miyanogawa Yuya
Yuya@
2021 12/19 · 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() ・・・*1
// 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

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

Categories: プログラミングTags: electron, Javascript, react

Footer

最近書きました。

  • Electron + React でサウンドファイルを再生する方法。
  • 【解決済み】さくらVPS kusanagi9でwordpressのプラグイン更新が出来ない。
  • 【解決】ERROR ITMS-90237: “The product archive package’s signature is invalid. Ensure that it is signed with your “3rd Party Mac Developer Installer” certificate.”
  • オリジナルIQテスト中級編 全16問 測定可能IQ120 ( s.d.15 )
  • 日本人の世界での平均IQは3位。
  • 開発中のToDoアプリ。
  • 【図解で解説】2021年IQテスト(2021年度 新証明書)の答え全18問
  • 【図解で解説】令和初iqテスト2020年版の答え 全18問。
  • IQとはあなたの未来を照らす光
  • IQの標準偏差とレアリティ

興味と関心のリスト

  • IQテストの答えと解説 (16)
  • IQについて (13)
  • Cambridge Brain Sciences (4)
  • 雑記 (6)
  • プログラミング (5)

より細かい分類

A Real Me (6) Brain Wars (1) Brain Workshop (1) Cambridge Brain Sciences (3) electron (3) Fit Brains (1) Hampshire Tree Task (1) ipc (1) ipcMain (1) ipcRender (1) IQ CERTIFICATE (1) IQTEST (2) IQtest.dk (4) IQについて (1) Javascript (3) kusanagi (1) Lumosity (1) MacAppStore (1) mas (1) MensaIQTest (2) react (1) testiq.dk (1) Transpoter (1) VONVON (4) wordpress (1) Xcode13 (1) さくらVPS (1) プログラミング (1) ヴィーガン (1) 思考 (1) 意識と感情 (1) 感情論 (2) 読書 (1)

このブログの歴史

最近のコメントです。

  • Yuya@ on 2020年版 ノルウェーメンサの答えと解説 Exercise 1〜35: “Lung コメントありがとうございます。 Exercise33 について考…” Dec 26, 01:36
  • 宮田正光 on 有料IQテスト IQ CERTIFICATE 2019を遊んでみた結果: “なし” Dec 16, 19:58
  • Lung on 2020年版 ノルウェーメンサの答えと解説 Exercise 1〜35: “Exercise33について、グルーピングと順番までは同じなのですが 折り返す…” Aug 14, 00:44
  • Yuya@ on 【図解で解説】2021年IQテスト(2021年度 新証明書)の答え全18問: “にぇ さん コメントありがとうございます。 仮想通貨に夢中になっててブロ…” Jun 22, 04:47
  • にぇ on 【図解で解説】2021年IQテスト(2021年度 新証明書)の答え全18問: “Q10は、選択肢に1本の線の図形が他にもありますので… 「円の中心として回転対…” May 8, 19:40
  • たらこ on 【IQ測定2.0】2014 IQ Test 解答と解説: “200:レオナルド・ダ・ヴィンチ” Apr 21, 19:48
  • Yuya@ on 【図解で解説】2021年IQテスト(2021年度 新証明書)の答え全18問: “こ さん コメント有難うございます。 画像作成ミスです。 Q17の…” Apr 3, 01:47

© 2023inspirationlife. All rights reserved.

  • About
  • Products
  • Contact
  • プライバシーポリシー
  • 免責事項