时间戳

首页 > 解决方案 > 如何读取文件名并处理我的 html 标签？

javascript - 如何读取文件名并处理我的 html 标签？

问题描述

我尝试用电子和 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>

索引.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 音乐标题标签？

标签： javascriptjquerynode.jselectron

解决方案

似乎这里发生了一些事情。您是否试图允许用户选择一个文件或文件目录？您的函数名为“openFolderDialog”，但您指定的是“openfile”。有关各种选项，请参阅showOpenDialog文档。在 OSX 上，您可以同时指定： [ openfile, openDirectory] 但在 Windows 上不起作用并openDirectory优先。

如果您希望用户一次只选择一个文件，则不需要您的“scanFile”功能 - 您可以使用filters（无句点，大小写无关紧要）：

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

查看这篇文章：在 Electron 中使用 HTML5 音频

要更改 H1 文本，因为您已经在使用jquery，您可以这样做

  $('#musictitle').text(sometext);

推荐阅读