Как мне прочитать имя файла и обработать мой HTML-тег? - PullRequest
0 голосов
/ 07 апреля 2019

Я пытался сделать музыкальный плеер с электронным и jquery.В качестве первого шага я хочу открыть меню, щелкнуть файл, а затем изменить название музыки.Мне удалось открыть меню, но я не могу перейти к следующему шагу.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chplayer</title>
    <link rel="stylesheet" href=""/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>CH Music Player</h1>
    <h1 id="musictitle">[Music Title]</h1>
    <h3 id="artistname">[artist name]</h3>
    <image src="http://placehold.it/150X90" id="albumimage"/>
    <div>
        <input type="range" id="musicProgress" min="0" max="100">
    </div>

    <table>
      <tr>
        <td>
          <button id="previousButton"></button>
          <button id="pauseButton"></button>
          <button id="nextButton"></button>
        </td>
        <td>
          <input type="range" id="volumeProgess" min="0" max="100">
        </td>
      </tr>
    </table>
  </body>
  <script>

  </script>
</html>

index.html

const { app, BrowserWindow, Menu, dialog } = require('electron')
const path = require('path')
const fs = require('fs')

let win

function createWindow () {
  win = new BrowserWindow({ width: 800, height: 600 })

  var menu = Menu.buildFromTemplate([
    {
      label: 'Folders',
      accelerator: 'CommandOrControl+o',
      click: function () {
        openFolderDialog()
      }
    },
    {
      label: 'Info',
      click: function() {
        dialog.showMessageBox(win,{type: "none", title: "Information",
      message: "github link"},(response,checkboxChecked) => {
        console.log(response)
      })
      }
    }
  ])
  Menu.setApplicationMenu(menu)
  win.loadFile('index.html')
  win.webContents.openDevTools()
  win.on('closed', () => {
    win = null
  })
}
app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

function openFolderDialog() {
  dialog.showOpenDialog(win, {
    properties: ['openFile']
  } , filepath  => {

    if (filepath) {
      fs.writeFile('path.txt', filepath, function (err, data) {
        if (err) console.log(err);
      });
      scanFile(filepath)
    }
  }) 
}

function scanFile(filepath) {
  if(!filepath || filepath[0] == 'undefined') return;
  console.log(filepath[0])
  fs.readFile(filepath[0],"utf8", (err,data) => {
    if(err) console.log(err);
    var arr = [];
    if (data.substr(-4) === '.mp3' || data.substr(-4) === '.m4a'
    || data.substr(-5) === '.webm' || data.substr(-4) === '.wav'
    || data.substr(-4) === '.aac' || data.substr(-4) === '.ogg'
    || data.substr(-5) === '.opus') {
    arr.push(data);
  }
  var objToSend = {};
    objToSend.files = arr;
    objToSend.path = filepath;

    win.webContents.send('selected-files', objToSend)
  })  
}

main.js

Как мне прочитать имя файла из открытого меню и изменить тег h1 musictitle?

1 Ответ

1 голос
/ 07 апреля 2019

Похоже, здесь происходит несколько вещей. Вы пытаетесь позволить пользователю выбрать один файл или каталог файлов? Ваша функция называется «openFolderDialog», но вы указываете «openfile». См. showOpenDialog документацию для различных опций. В OSX вы можете указать оба: [openfile, openDirectory], но в Windows это не работает и openDirectory имеет приоритет.

Если вы хотите, чтобы пользователь выбирал только один файл за раз, тогда ваша функция «scanFile» не нужна - вы можете использовать filters (без периода, регистр не имеет значения):

filters: [
    {name: 'Audio', extensions: ['mp3', 'ogg', 'm4a']},
  ]

Ознакомьтесь с этой статьей: Работа с HTML5-аудио в Electron

Чтобы изменить текст H1, поскольку вы уже используете jquery, вы можете сделать

  $('#musictitle').text(sometext);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...