1

Estou fazendo um projeto de um player de música simples utilizando o ElectronJS. Para isso estou usando uma biblioteca que reproduz arquivos MP3(play-sound), como posso chamar essa função dentro do meu HTML? Eu preciso criar outro arquivo apenas para reprodução de sons ou posso jogar essa função dentro do arquivo principal?

CÓDIGO: index.js

console.log('Main process working');

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const url = require('url');
const player = require('play-sound');

let win;

function createWindow(){
  win = new BrowserWindow({width: 300, height: 200, resizable: false, 
  minimizable: false, fullscreen: false, center: true});
  win.loadURL(`file://${__dirname}/app/public/index.html`);

  win.on('closed', () =>{
    win = null;
  });
}

app.on('ready', createWindow);

O código para tocar sons é:

var audio = player.play('nomedoarquivo.mp3', {/*efeitos*/}, (err) => {
    if (err) throw err
});

E para parar:

audio.kill();

Como eu posso chamar esta função dentro do meu arquivo HTML?

Aceito sugestões de bibliotecas importantes para todos projetos!

1
  • Não querendo parecer "pedante", mesmo que a questão já tenha sido resolvida eu recomendo reformular seu titulo porque: um app Electron não pode ser definido como um site. Isso ajuda a comunidade. 10/10/2018 às 16:18

1 Resposta 1

1

Diferentemente de NW.js que compartilha o contexto do navegador e de node no mesmo processo o que permite executar pacotes npm e acessar API's do navegador no mesmo arquivo .js, Electron faz diferente, em Electron cada contexto é executado em um processo isolado, a maneira como node e o código de "front-end" se comunicam é através de mensagens.

Mensagens:

Tanto o código no processo principal como no processo de renderização utilizam uma instância de EventEmitter para trocar mensagens ... no processo principal utiliza-se o módule ipcMan ou a propriedade "webContents" de "BrowserWindow":

// use ipcMain no processo principal (sync/async) ----------------
const {ipcMain} = require('electron')
// ouvinte, resposta assíncrona
ipcMain.on('iniciar-player', (event, arg) => {
    // sua lógica aqui ...
    event.sender.send('player-reply', 'started-async')
})

// ouvinte, resposta síncrona
ipcMain.on('iniciar-player', (event, arg) => {
    // sua lógica aqui ...
    event.returnValue = 'started-sync'
})

// no processo de renderização (página web) ----------------------
const {ipcRenderer} = require('electron')

// ouvinte assíncrono (ouvinte antes do envio)
ipcRenderer.on('player-reply', (event, arg) => {
    console.log(arg) // "started-async"
})
// enviar
ipcRenderer.send('iniciar-player', 'argumento-ou-configuração')

// ouvinte síncrono
let response = ipcRenderer.sendSync('iniciar-player', 'argumento-ou-configuração')
console.log(response) // "started-sync"

No processo principal execute a lógica de seu módulo. O próximo exemplo usa "webContents" no processo principal (assincronamente):

// no processo principal (async) ---------------------------------
const {app, BrowserWindow} = require('electron')
let win = null

app.on('ready', () => {
    win = new BrowserWindow({width: 800, height: 600})
    win.loadURL(`file://${__dirname}/app/public/index.html`)
    // ouvinte
    win.webContents.on('iniciar-player', (/*parametros serializados em JSON por padrão*/) => {
        // sua lógica ...
        win.webContents.send('player-reply', 'started-async') // responda
    })
})

// no processo de renderização (página web) ----------------------
const {ipcRenderer} = require('electron')

// ouvinte assíncrono (ouvinte antes do envio)
ipcRenderer.on('player-reply', (event, arg) => {
    console.log(arg) // "started-async"
})
// enviar
ipcRenderer.send('iniciar-player', 'argumento-ou-configuração')

Isto é o básico sobre troca de mensagens entre o código executado na página (render) e o processo principal (main).


Nota: você pode ainda se abstrair destas mensagens usando o módulo remote caso deseje apenas acessar o módulo sem passar pelo processo principal

Remote:

Você pode acessar no processo de renderização um módulo ou arquivo (.js) em especifico através do módulo remote:

// no processo de renderização (página web)
const player = require('electron').remote.require('play-sound')

// abrir player
const audio = player.play('nomedoarquivo.mp3', {/*efeitos*/}, (err) => {
    if (err) throw err
});

// simulando a iteração do usuário para encerrar o player
document.getElementById('btn-fechar-player').addEventListener('click', () => {
    audio.kill()
}, false)

Usar remote parece bem mais simples más, leia a documentação ... "algumas coisas" não são recomendadas fazer ao usar remote.


Fontes:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .