I want to convert video to mp3 using Reactjs.

I made an API Key from Youtube using Youtube API v3.

I need to get mp3 download link!

With this application you can take the information of a video just by putting the link in a text input.

import React, { useRef, useState } from "react"
import "./style.scss"
import logo from "./logo.png"

export default function App() {
    const videoLink = useRef("")
    const [video, setVideo] = useState(false)
    const [items, setItems] = useState([])

    const matchYoutubeUrl = (url) => {
        var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
        var matches = url.match(p)
        if (matches) {
            return matches[1]
        } else {
            alert("Please enter a valid link!")
        }
        return false;
    }
    const convertVideo = () => {
        if (videoLink.current.value === "") {
            alert("Don't forget the link...")
        } else {
            const newUrl = matchYoutubeUrl(videoLink.current.value)
            if (newUrl !== false) {
                setVideo(true)
                const apiUrl = ";id=" + newUrl + "&key=<api_key>"
                fetch(apiUrl)
                    .then(response => response.json())
                    .then(data => {
                        setItems(data.items)
                        console.log(data)
                    })
            }
        }
    }
    return (
        <>
            <img src={logo} id="logo" alt={logo} />
            <h1>Converter Youtube</h1>
            <div id="App">
                <div className="inputs">
                    <input type="text" placeholder="Video Link" ref={videoLink} autoFocus />
                    <input type="button" value="CONVERT VIDEO" onClick={() => convertVideo()} id="convert" />
                </div>
                <div style={{display: video ? "inline" : "none"}}>
                    {
                        items.map((item, key) => {
                                var description
                                if (item.snippet.description !== "") {
                                    description = item.snippet.description.substring(0, 100) + "..."
                                }
                                return (
                                    <div key={key}>
                                        <img src={item.snippet.thumbnails.high.url} height={item.snippet.thumbnails.default.height+50} width={item.snippet.thumbnails.default.width+50} alt={item.snippet.title} id="image" />
                                        <div id="channel"><p id="title">{item.snippet.title}</p></div>
                                        <p id="description">{description}</p>
                                        <a href="sdadsa.png" download={`${item.snippet.title}.mp3`}>
                                            <button type="button">Download</button>
                                        </a>
                                    </div>
                                )
                            }
                        )
                    }
                </div>
            </div>
            <div id="App" className="footer">
                <span>Copyright 2021</span>
            </div>
        </>
    )
}

Thank you!

I want to convert video to mp3 using Reactjs.

I made an API Key from Youtube using Youtube API v3.

I need to get mp3 download link!

With this application you can take the information of a video just by putting the link in a text input.

import React, { useRef, useState } from "react"
import "./style.scss"
import logo from "./logo.png"

export default function App() {
    const videoLink = useRef("")
    const [video, setVideo] = useState(false)
    const [items, setItems] = useState([])

    const matchYoutubeUrl = (url) => {
        var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
        var matches = url.match(p)
        if (matches) {
            return matches[1]
        } else {
            alert("Please enter a valid link!")
        }
        return false;
    }
    const convertVideo = () => {
        if (videoLink.current.value === "") {
            alert("Don't forget the link...")
        } else {
            const newUrl = matchYoutubeUrl(videoLink.current.value)
            if (newUrl !== false) {
                setVideo(true)
                const apiUrl = "https://www.googleapis./youtube/v3/videos?part=snippet&id=" + newUrl + "&key=<api_key>"
                fetch(apiUrl)
                    .then(response => response.json())
                    .then(data => {
                        setItems(data.items)
                        console.log(data)
                    })
            }
        }
    }
    return (
        <>
            <img src={logo} id="logo" alt={logo} />
            <h1>Converter Youtube</h1>
            <div id="App">
                <div className="inputs">
                    <input type="text" placeholder="Video Link" ref={videoLink} autoFocus />
                    <input type="button" value="CONVERT VIDEO" onClick={() => convertVideo()} id="convert" />
                </div>
                <div style={{display: video ? "inline" : "none"}}>
                    {
                        items.map((item, key) => {
                                var description
                                if (item.snippet.description !== "") {
                                    description = item.snippet.description.substring(0, 100) + "..."
                                }
                                return (
                                    <div key={key}>
                                        <img src={item.snippet.thumbnails.high.url} height={item.snippet.thumbnails.default.height+50} width={item.snippet.thumbnails.default.width+50} alt={item.snippet.title} id="image" />
                                        <div id="channel"><p id="title">{item.snippet.title}</p></div>
                                        <p id="description">{description}</p>
                                        <a href="sdadsa.png" download={`${item.snippet.title}.mp3`}>
                                            <button type="button">Download</button>
                                        </a>
                                    </div>
                                )
                            }
                        )
                    }
                </div>
            </div>
            <div id="App" className="footer">
                <span>Copyright 2021</span>
            </div>
        </>
    )
}

Thank you!

• javascript
• reactjs
• youtube
• mp3

• 1 This code works, but i want to get mp3 video link :D – Narcis Lazar Commented Nov 21, 2021 at 10:26
• How are you trying to convert the Video to MP3? Are you using any backend services like a Nodejs server? – Clive Machado Commented Nov 21, 2021 at 10:47
• 1 no.... :( is it necessary to do this? – Narcis Lazar Commented Nov 21, 2021 at 10:48
• 2 Yes. You do need a server to download the video first before conversion. – Clive Machado Commented Nov 21, 2021 at 12:02

1 Answer 1

From what I understand from the ments under the main question. Here is what you need to do.

The logic (Dry Run):

1. Once the user adds the link, Send the link via api to a server like Node.js
2. Once the link is sent to the server, download the video. You can use npm packages such as youtube-dl-exec
3. Once the video file is downloaded you can use the file source to convert it to mp3 format. You can use packages like video-to-audio