Create playlist and tracks from an file/folder input

[4www]

Similar to this feature https://github.com/hugurp/dj-booklet

It would be great to have the possibility to easily create a playlist from a local folder filled with audio files.

Idea

1. one <input type="file" multiple/> would accept a folder, and recursively scan all files to figure out which ones the html media elements can play (<audio> for now).
2. then it would create a json representation of tracks composing a playlist, that fits the one accepted by the <radio4000-player>

Questions

• should this be implemented directly in the radio4000-player
• should this also be able to find and read json files, to create a playlist from the right media? For example. a folder test is filled with audio files in different sub folders; when the test folder is imported in the input, it will recurively find all audio files, json files, and image files, that could "enrich" / "rectify" the json representation that the importer is building.

[oskarrough]

Example how this can be done using dat

<meta charset="utf-8">
<title>dat ieef</title>

<radio4000-player></radio4000-player>

<script>
var player = document.querySelector('radio4000-player')
var vuePlayer

player.addEventListener('playerReady', () => {
	console.info('playerReady');
	vuePlayer = player.getVueInstance()
	start()
})

const start = async (player) => {
	// Get files from current folder.
	var archive = new DatArchive(location.href)
	var files = await archive.readdir('/')

	// Ignore non-audio files.
	var tracks = files.filter(file => {
		if (file.includes('index.html')) return false
		if (file.includes('radio4000-player.min.js')) return false
		if (file.includes('dat.json')) return false
		if (file.includes('.datignore')) return false
		if (file.includes('.DS_Store')) return false
		return true
	})

	// Create playlist for radio4000-player and load it.
	var playlist = {
		title: 'dat 200ok?!',
		tracks: tracks.map((filePath, index) => {
			return {
				id: `${index}_filePath`,
				title: filePath,
				url: location.href + '/' + encodeURI(filePath)
			}
		})
	}

	vuePlayer.updatePlaylist(playlist)
}
</script>

<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/radio4000-player.min.js"></script>