1

I am new to coding and am trying to figure out how to link a javascript function to an HTML button. I am trying to create a YouTube to MP3 converter for personal use. I am using the npm install youtube-mp3-downloader --save library. Below is the code:

var YoutubeMp3Downloader = require("youtube-mp3-downloader");

//Configure YoutubeMp3Downloader with your settings
var YD = new YoutubeMp3Downloader({
  "ffmpegPath": "/usr/local/bin/ffmpeg", // FFmpeg binary location
  "outputPath": "*output path*", // Output file location (default: the home directory)
  "youtubeVideoQuality": "highestaudio", // Desired video quality (default: highestaudio)
  "queueParallelism": 2, // Download parallelism (default: 1)
  "progressTimeout": 2000, // Interval in ms for the progress reports (default: 1000)
  "allowWebm": false // Enable download from WebM sources (default: false)
});

//Download video and save as MP3 file
YD.download("jNQXAC9IVRw");

YD.on("finished", function(err, data) {
  console.log(JSON.stringify(data));
});

YD.on("error", function(error) {
  console.log(error);
});

YD.on("progress", function(progress) {
  console.log(JSON.stringify(progress));
});
<h1 class="heading">YouTube Downloader</h1>
<input class="URL-input" placeholder="Paste the letters between = and & of YouTube URL">
<button class="YD.download(jNQXAC9IVRw)">Convert</button>

I am trying to link the YD.download function to the convert button. Any suggestions would be appreciated. Thank you.

Improve this question
0

3 Answers 3

Reset to default
3

Typically you would use addEventListener to connect an event listener function to the click event of the button.

However, the library you have found will not run in a web browser. It is designed for use with Node.js and depends on APIs that are provided by Node.js and not by web browsers (such as the ability to execute programs like ffmpeg and write files to the disk).

If you want to connect it to a webpage then you'll need to create a web service (you can create a web server in Node.js using the Express.js library) and then trigger it with an HTTP request (e.g. by submitting a <form> to the URL in your web service that triggers this code).

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

you can your function to the onclick attribute of your button.

<button onclick="YD.download('jNQXAC9IVRw')" >download</button>
Improve this answer

2 Comments

That won't work. The function doesn't exist because the code used to create it won't run in a web browser.
If the function is executing on the server side then yes it's not going to work.
0

There are two ways really:

  • add an onclick attribute:

    <button onclick="myFunction()">Click me</button>

  • add an event listener:

    document.getElementById("myBtn").addEventListener("click", displayDate);

But in order for the last one to work you need to add an id tag to the <button>, also the class attribute is intended to identify an element as a part of a class (for CSS, javascript), not for calling JS functions.

As @Quentin has mentioned, your function won't really work, so you should find a different solution, if you wish to use JS.

Improve this answer

5 Comments

That won't work. The function doesn't exist because the code used to create it won't run in a web browser.
While that is a valid concern, and is definitely the bigger problem, the question is about how to link a JS function to a button. I feel its relevant to at least answer that question.
The question is about linking "the YD.download function"
None the less, were the function in question appropriate, he would still need to know how to link it.
Well, yes. If they had asked a different question then this would be an answer to it… but they didn't.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.