Migrate music-metadata-browser to music-metadata

Includes some code refactoring using `async`/`await` to simplify promise chaining.

Author: Borewit

package.json

@@ -11,15 +11,13 @@
   },
   "devDependencies": {
     "audiomotion-analyzer": "^4.5.1",
-    "buffer": "^6.0.3",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "http-server": "^14.1.1",
     "idb-keyval": "^6.2.1",
     "mini-css-extract-plugin": "^2.9.0",
-    "music-metadata-browser": "^2.5.10",
+    "music-metadata": "^11.6.1",
     "notie": "^4.3.1",
-    "process": "^0.11.10",
     "sortablejs": "^1.15.2",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4"

src/index.js

@@ -32,7 +32,7 @@
 import AudioMotionAnalyzer from 'audiomotion-analyzer';
 import packageJson from '../package.json';
 import * as fileExplorer from './file-explorer.js';
-import * as mm from 'music-metadata-browser';
+import { parseBlob, parseWebStream } from 'music-metadata';
 import './scrollIntoViewIfNeeded-polyfill.js';
 import { get, set, del } from 'idb-keyval';
 
@@ -1194,52 +1194,48 @@ function addMetadata( metadata, target ) {
  * @param {object} { album, artist, codec, duration, title }
  * @returns {Promise} resolves to 1 when song added, or 0 if queue is full
  */
-function addSongToPlayQueue( fileObject, content ) {
+async function addSongToPlayQueue( fileObject, content ) {
 
-	return new Promise( resolve => {
-		if ( queueLength() >= MAX_QUEUED_SONGS ) {
-			resolve(0);
-			return;
-		}
+	if ( queueLength() >= MAX_QUEUED_SONGS ) {
+		return 0;
+	}
 
-		const { fileName, baseName, extension } = parsePath( fileExplorer.decodeChars( fileObject.file ) ),
-			  uri       = normalizeSlashes( fileObject.file ),
-			  newEl     = document.createElement('li'), // create new list element
-			  trackData = newEl.dataset;
+	const { fileName, baseName, extension } = parsePath( fileExplorer.decodeChars( fileObject.file ) ),
+		  uri       = normalizeSlashes( fileObject.file ),
+		  newEl     = document.createElement('li'), // create new list element
+		  trackData = newEl.dataset;
 
-		Object.assign( trackData, DATASET_TEMPLATE ); // initialize element's dataset attributes
+	Object.assign( trackData, DATASET_TEMPLATE ); // initialize element's dataset attributes
 
-		if ( ! content )
-			content = parseTrackName( baseName );
+	if ( ! content )
+		content = parseTrackName( baseName );
 
-		trackData.album    = content.album || '';
-		trackData.artist   = content.artist || '';
-		trackData.title    = content.title || fileName || uri.slice( uri.lastIndexOf('//') + 2 );
-		trackData.duration = content.duration || '';
-		trackData.codec    = content.codec || extension.toUpperCase();
+	trackData.album    = content.album || '';
+	trackData.artist   = content.artist || '';
+	trackData.title    = content.title || fileName || uri.slice( uri.lastIndexOf('//') + 2 );
+	trackData.duration = content.duration || '';
+	trackData.codec    = content.codec || extension.toUpperCase();
 //		trackData.subs     = + !! fileObject.subs; // show 'subs' badge in the playqueue (TO-DO: resolve CSS conflict)
 
-		trackData.file     = uri; 				// for web server access
-		newEl.handle       = fileObject.handle; // for File System API access
-		newEl.dirHandle    = fileObject.dirHandle;
-		newEl.subs         = fileObject.subs;	// only defined when coming from the file explorer (not playlists)
+	trackData.file     = uri; 				// for web server access
+	newEl.handle       = fileObject.handle; // for File System API access
+	newEl.dirHandle    = fileObject.dirHandle;
+	newEl.subs         = fileObject.subs;	// only defined when coming from the file explorer (not playlists)
 
-		playlist.appendChild( newEl );
+	playlist.appendChild( newEl );
 
-		if ( FILE_EXT_AUDIO.includes( extension ) || ! extension ) {
-			// disable retrieving metadata of video files for now - https://github.com/Borewit/music-metadata-browser/issues/950
-			trackData.retrieve = 1; // flag this item as needing metadata
-			retrieveMetadata();
-		}
+	if ( FILE_EXT_AUDIO.includes( extension ) || ! extension ) {
+		// disable retrieving metadata of video files for now - https://github.com/Borewit/music-metadata-browser/issues/950
+		trackData.retrieve = 1; // flag this item as needing metadata
+		await retrieveMetadata();
+	}
 
-		if ( queueLength() == 1 && ! isPlaying() )
-			loadSong(0).then( () => resolve(1) );
-		else {
-			if ( playlistPos > queueLength() - 3 )
-				loadSong( NEXT_TRACK );
-			resolve(1);
-		}
-	});
+	if ( queueLength() === 1 && ! isPlaying() ) {
+		await loadSong(0);
+		if ( playlistPos > queueLength() - 3 )
+			await loadNextSong();
+	}
+	return 1;
 }
 
 /**
@@ -1968,7 +1964,7 @@ function keyboardControls( event ) {
 }
 
 /**
- * Sets (or removes) the `src` attribute of a audio element and
+ * Sets (or removes) the `src` attribute of an audio element and
  * releases any data blob (File System API) previously in use by it
  *
  * @param {object} audio element
@@ -1996,17 +1992,34 @@ function loadAudioSource( audioEl, newSource ) {
  * @param {boolean}   `true` to start playing
  * @returns {Promise} resolves to a string containing the URL created for the blob
  */
-async function loadFileBlob( fileBlob, audioEl, playIt ) {
-	const url = URL.createObjectURL( fileBlob );
-	loadAudioSource( audioEl, url );
-	try {
-		await waitForLoadedData( audioEl );
-		if ( playIt )
-			audioEl.play();
-	}
-	catch ( e ) {}
+function loadFileBlob(fileBlob, audioEl, playIt) {
+	return new Promise((resolve, reject) => {
+		const url = URL.createObjectURL(fileBlob);
+		loadAudioSource(audioEl, url);
+
+		// Success handler
+		audioEl.onloadeddata = () => {
+			cleanup();
+			if (playIt) {
+				audioEl.play().catch(err => {
+					consoleLog("Playback failed:", err);
+				});
+			}
+			resolve(url);
+		};
+
+		// Error handler
+		audioEl.onerror = () => {
+			cleanup();
+			reject(new Error("Failed to load audio from Blob"));
+		};
 
-	return url;
+		// Cleanup to avoid memory leaks
+		function cleanup() {
+			audioEl.onloadeddata = null;
+			audioEl.onerror = null;
+		}
+	});
 }
 
 /**
@@ -2072,7 +2085,8 @@ function loadGradientIntoCurrentGradient(gradientKey) {
 /**
  * Load a music file from the user's computer
  */
-function loadLocalFile( obj ) {
+async function loadLocalFile( obj ) {
+
 	const fileBlob = obj.files[0];
 
 	if ( fileBlob ) {
@@ -2081,11 +2095,14 @@ function loadLocalFile( obj ) {
 		audioEl.dataset.file = fileBlob.name;
 		audioEl.dataset.title = parsePath( fileBlob.name ).baseName;
 
-		// load and play
-		loadFileBlob( fileBlob, audioEl, true )
-			.then( url => mm.fetchFromUrl( url ) )
-			.then( metadata => addMetadata( metadata, audioEl ) )
-			.catch( e => {} );
+		try {
+			await loadFileBlob( fileBlob, audioEl, true );
+			// Maybe do this parallel?
+			const metadata = await parseBlob( fileBlob );
+			await addMetadata( metadata, audioEl );
+		} catch( error ) {
+			consoleLog("Failed to load local file", error);
+		}
 	}
 }
 
@@ -3247,47 +3264,44 @@ async function retrieveMetadata() {
 
 	if ( queueItem ) {
 
-		let uri    = queueItem.dataset.file,
-			revoke = false;
+		let uri    = queueItem.dataset.file;
+		let file;
 
 		waitingMetadata++;
 		delete queueItem.dataset.retrieve;
+		let metadata;
 
-		queryMetadata: {
-			if ( queueItem.handle ) {
-				try {
-					if ( await queueItem.handle.requestPermission() != 'granted' )
-						break queryMetadata;
+		if ( queueItem.handle ) {
+			// Fetch metadata from File object
+			if ( await queueItem.handle.requestPermission() !== 'granted' )
+				return;
 
-					uri = URL.createObjectURL( await queueItem.handle.getFile() );
-					revoke = true;
-				}
-				catch( e ) {
-					break queryMetadata;
-				}
+			file = await queueItem.handle.getFile();
+			uri = URL.createObjectURL( file );
+			metadata = await parseBlob( file, { skipPostHeaders: true } );
+		} else {
+			// Fetch metadata from URI
+			const response = await fetch(uri);
+			if (response.body) {
+				metadata = await parseWebStream( response.body, { skipPostHeaders: true } );
+			} else {
+				throw new Error('Failed to stream response.body');
 			}
+		}
 
-			try {
-				const metadata = await mm.fetchFromUrl( uri, { skipPostHeaders: true } );
-				if ( metadata ) {
-					addMetadata( metadata, queueItem ); // add metadata to play queue item
-					syncMetadataToAudioElements( queueItem );
-					if ( ! ( metadata.common.picture && metadata.common.picture.length ) ) {
-						getFolderCover( queueItem ).then( cover => {
-							queueItem.dataset.cover = cover;
-							syncMetadataToAudioElements( queueItem );
-						});
-					}
-				}
-			}
-			catch( e ) {}
+		addMetadata( metadata, queueItem ); // add metadata to play queue item
+		syncMetadataToAudioElements( queueItem );
+		if ( ! queueItem.handle && ! ( metadata.common.picture && metadata.common.picture.length ) ) {
+			queueItem.dataset.cover = await getFolderCover( uri );
+			syncMetadataToAudioElements( queueItem );
+		}
 
-			if ( revoke )
-				URL.revokeObjectURL( uri );
+		if ( file ) {
+			URL.revokeObjectURL( uri );
 		}
 
 		waitingMetadata--;
-		retrieveMetadata(); // call again to continue processing the queue
+		await retrieveMetadata(); // call again to continue processing the queue
 	}
 }
 

webpack.config.js

@@ -36,10 +36,6 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: 'styles.css',
     }),
-    new webpack.ProvidePlugin({
-      Buffer: ['buffer', 'Buffer'],
-      process: 'process/browser.js',
-    }),
   ],
   output: {
     filename: pathData => {