admin管理员组文章数量:1427586
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!
Share Improve this question edited Nov 21, 2021 at 10:27 Andy 63.6k13 gold badges71 silver badges98 bronze badges asked Nov 21, 2021 at 10:18 Narcis LazarNarcis Lazar 11 silver badge6 bronze badges 4- 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
Reset to default 4From what I understand from the ments under the main question. Here is what you need to do.
The logic (Dry Run):
- Once the user adds the link, Send the link via api to a server like Node.js
- Once the link is sent to the server, download the video. You can use npm packages such as youtube-dl-exec
- 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
本文标签： javascriptConvert youtube video to mp3 usingYoutube API v3React JSStack Overflow
版权声明：本文标题：javascript - Convert youtube video to mp3 using - Youtube API v3 - React JS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745495829a2660802.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论