2

What I'm trying to make is a input that when you type the song name it plays. First what I tried was

function myFunction() {
  var id = document.getElementById("myInput").value;
var audio = 'https://bobzilla07.github.io/Music_Tap/' + id 
  var audio = new Audio ('audio');
 audio.play();

with the html code of

<input id="myInput" type="text">
<button onclick="myFunction()">play</button>

Which didn't work

so I though what if I made it so

function myFunction() {
var id = document.getElementById("myInput").value;
var audio = new Audio 'https://bobzilla07.github.io/Music_Tap/' + id;
audio.play();

to which is still didn't work. Does anybody have any idea on how to fix it so it works?

Edit: Im not good with json or even know what im doing btu would there be a possibilty to get the input from <input id="myInput" type="text"> <button onclick="myFunction()">play</button>

and put it in json to then call the audio from the link https://bobzilla07.github.io/Music_Tap/${song}.mp3 with ${song} being the input from the html input

Improve this question
6
  • Rename your var into let, using var is outdated, even tho this is not the answer to your question, it will improve your performance ;) let x = 1... Commented Dec 5, 2021 at 22:22
  • @MaximilianDolbaum thank you for that little bit of advice :) Commented Dec 5, 2021 at 22:23
  • Is there a list of possible names? Commented Dec 5, 2021 at 22:24
  • yes you can find them in the code here github.com/Bobzilla07/Music_Tap/blob/master/index.html or you can find some of them here bobzilla07.github.io/Song_Music_Tap Commented Dec 5, 2021 at 22:25
  • Neither of those are correct syntax... first one you have new Audio('audio') which just passes in the string "audio", second one you have new Audio 'https://...' which should throw a syntax error Commented Dec 5, 2021 at 22:25

2 Answers 2

Reset to default
1

I believe you have to pass the extension here as well. This does work because this server is CORS enabled.

form.addEventListener("submit", myFunction)
function myFunction(e) {
  e.preventDefault();
  audio.src = 'https://bobzilla07.github.io/Music_Tap/' + myInput.value + '.mp3';
  audio.play();
}
audio { display:none;}
<form id="form">
  <input id="myInput" value="Panic-Song">
  <input type="submit">
</form>
<audio controls id="audio"></audio>

Song list

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

5 Comments

Would i be able to use it without the controls?
Yes, just remove the controls attribute.
If I was to put a button so that when it starts playing (with contols hidden) what function would I have the button run? Also when removing the controls it doesnt play.
Then you have to wrap into a form, and listen for the submit event. Also used CSS to hide the player, it should still play everywhere. Note that into Firefox it was playing it's a cross browser issue. See the edit if you get confused. Good luck.
As you stated it says that a server is CORS enabled how would i get my github server to be cors enabled?
1

You can do it like this:

let id = document.getElementById("myInput").value;
let audio = new Audio(`https://bobzilla07.github.io/Music_Tap/${id}.mp3`);
audio.play();

Now you can search for the file names of your songs. Like 1979 will play 1979.mp3.

Improve this answer

1 Comment

i found that this doesnt work it could just be me though

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.