How to use in TypeScript

[rajatkhare619]

Hello,

How would I use this in TypeScript? How would I import it in a module. I tried including the js file in index.html but the code can't find 'jsmediatags'.

[aadsm]

To be honest I'm not sure, I have never used TypeScript, I've been using flow. My guess is that you'd have to build the TypeScript types in a file?

[rajatkhare619]

Hmm...not sure how I would do that...

[rajatkhare619]

I managed to include it in my code using the following import statement:

import * as jsmediatags from 'jsmediatags';

but now I'm getting another error as seen in the screenshot below:

I'm working on an Android application based on cordova so passing the URL to jsmediatags's read function like this: 'file:///storage/emulated/0/Music/02%20-%20Break%20The%20Rules.mp3'

As you see in the response, it's kind of working as there are tags in the response property but I don't know how to make it work completely.

Also, I found this issue that might be somewhat similar:
Issue

but I don't understand what exactly I should do.

[rajatkhare619]

OK, I was able to get it to work like this:

jsmediatags.read(file.toInternalURL(), {
onSuccess : (tags) => {
...
},
onError : (error) => {
...
}
});

Had to use the method 'toInternalURL()' on the file.

[aadsm]

@rajatkhare619, I'm glad you found the solution as I don't have any experience with Cordova. Pretty sure other people using the same technology have the same question, have you thought about writing a blog post about this? I could advertise it here on github.

[rajatkhare619]

That sounds like a good idea. I'll try to write it when I get some free time.

[Darkensses]

Hi, i used this lib on Ionic. Just need to add plugin Allow-Control-Allow-Origin: * to google chrome and implement the rajatkhare619's solution. It works for me 👍

[spencercap]

i cant seem to copy jsmediatags.min.js into my codebase and require it as indicated in the readme...
i keep hitting this error trying to import from the jsmediatags package (import * as jsmediatagsJs from '../js/jsmediatags.min.js';)

Uncaught TypeError: Cannot use 'in' operator to search for 'Object' in undefined
    at Object.$jscomp.polyfill (jsmediatags.min.js?t=1633533810972:2)
    at jsmediatags.min.js?t=1633533810972:2

---

however, i was able to get this library working with ts types by including the cdn into index.html like:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>

installing the types:
npm i -D @types/jsmediatags

then casting the window variable to a global const with the type:

import * as jsmediatagsType from '../../node_modules/@types/jsmediatags';
const jsmediatags = (window as any).jsmediatags as typeof jsmediatagsType;

[spencercap]

side note, there do seem to be some versioning problems...

the current npm package is at 3.9.7
the CDN points to 3.9.5
and the types lib is at 3.9.3

[uvulpos]

I wanted to use this library in svelte + typescript and these tips did not work out for me but this small change in the package.json of my local node module did. I don't even have to import it anymore since it is globally available anyway

$: fileUploadInput, updateMusicMetaData()

function updateMusicMetaData() {
        if (fileUploadInput && fileUploadInput[0]) {
            jsmediatags.read(fileUploadInput.item(0), {
                onSuccess: function (tag) {
                    console.log(tag);
                },
                onError: function (error) {
                    console.log(error);
                }
            });
        }
    }