Member Avatar for monstercameron

trying to make an mp3 player applet of sorts that will index a folder on my local media and make a list, which its adresses will feed into the audio tag (using chrome beta), but im stumpedat the html and know very little javascript! help!

  • 3 Contributors
  • 2 Replies
  • 109 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

— quick reality check and practical options. Browsers will not let a page silently walk a visitor's local folders for security. and were right that scanning server files needs server-side code, but for client-side access there are safe, user-driven options you can use to build a playlist.

If the files are on the server, index them with a server-side script (PHP/Node/Python) and return JSON that the page can load. If the files are on the user’s machine, ask the user to pick the folder: Chromium browsers support an input that lets the user select a directory, and modern Chromium also provides the File System Access API to pick and iterate a directory. After the user selects files, create blob URLs (URL.createObjectURL) or read the files and attach them as src to audio elements.

Example using the directory input (works in Chromium browsers):

<input id="dir" type="file" webkitdirectory multiple>

<script>
document.getElementById('dir').addEventListener('change', e => {
  const files = Array.from(e.target.files).filter(f => /\.(mp3|wav|ogg)$/i.test(f.name));
  const container = document.getElementById('playlist') || document.body;
  files.forEach(file => {
    const url = URL.createObjectURL(file);
    const div = document.createElement('div');
    div.innerHTML = '<span>' + file.name + '</span> <audio controls src="' + url + '"></audio>';
    container.appendChild(div);
  });
});
</script>

For a cleaner picker and recursive access, use window.showDirectoryPicker() (File System Access API). It requires HTTPS and a user gesture; iterate handles, call getFile() on file handles, then use the file blobs the same way.

Read the MDN docs for compatibility and details: File System Access (showDirectoryPicker) and the nonstandard webkitdirectory input attribute. Caveats: browsers require user consent, large libraries can stress memory so revoke object URLs when done (URL.revokeObjectURL), and if you need true unattended scanning, build a local app or run a local server to index files instead.

Recommended Answers

All 2 Replies

Member Avatar for Member #114696

You cant scan folders using JavaScript and HTML. Even if you use server side scripts like PHP,ASP.NET you will just be able to scan web folders on your server. So unless you want an online mp3 player, the thing is sort of impossible using client side scripts, html.

Member Avatar for MidiMagic

If you want to scan the files on the server, you need a server-side script, not javascript.

You can't look at the files on the client's computer for security reasons.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.