So I have a personal project that I’m working on, and I ran in to an issue I didn’t have previously. I’m supposed to have the audio play in time with when the image shows up, and I was making it on my desktop last night, it was working perfectly, but now, while I’m at school working on it with my laptop, the audio suddenly isn’t playing anymore. If needed, I can provide the full code, but here is the code that has the audio:
// Function to fade the image in and out
function fadeInOutImage() {
let img = document.createElement("img");
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5CRsVrXxQycPK3Xg0b7zxKGHc4gH6QXRF_Q&s";
img.style.position = "absolute";
img.style.top = "50%";
img.style.left = "50%";
img.style.transform = "translate(-50%, -50%)";
img.style.width = "400px";
img.style.height = "auto";
img.style.opacity = "0"; // Start at 0% opacity
img.style.transition = "opacity 1s ease-in-out";
document.body.appendChild(img);
// Create an audio element
let audio = document.createElement("audio");
audio.src = "https://s33.aconvert.com/convert/p3r68-cdx67/ge3rv-cnjdq.mp3";
audio.autoplay = true;
audio.loop = false;
audio.style.display = "none"; // Hide the audio player
document.body.appendChild(audio);
// Fade in to 70% opacity and start audio
setTimeout(() => {
img.style.opacity = "0.7";
audio.play();
}, 100);
// Fade out back to 0%
setTimeout(() => {
img.style.opacity = "0";
}, 2000);
// Stop and remove the audio and image after animation
setTimeout(() => {
img.remove();
audio.pause();
audio.remove();
}, 3500);
}
Are you able to access the mp3 URL? I’m not, it returns 404
As said, the audio file doesn’t exist.
I assume you used the site to convert an audio file, but they do not store the file forever.
404 - missing page
Please note all output files are only temporarily stored on our servers for 1-2 hours, after that they will be automatically deleted by a scheduled program.
Ah, I see. So I will have to use a different site to convert the audio. Okay, thanks.
How big is the audio file? You could convert it to base64 and put that directly into your src attribute instead. Then it’s not fetching from an external source.
1 Like
It’s 129kb, but I don’t know how to put it directly into my src that way
Maybe you can search the internet for a guide
1 Like
The site that I’m working on this project on brings an error every time I try to use base64. Is there another alternative?
Your string should start with data:audio/mpeg;base64, followed by the lengthy encoding of the audio into base 64.
I have used Base64Guru for pretty big audio files before and it works for me.
Just make sure you select the ‘Data URI’ output format and then simply paste the whole converted string into your src attribute of your audio element.
Always share the error that you are getting, otherwise it’s impossible to know what the problem is.
I use jsfiddle, and when I enter the base64, I get the message “Cannot save this fiddle. (ERRW:1.0:8942)”
Not much of an error is it? Is there any other messages generated by jsfiddle that might be useful?
Please share your updated code as well.
If it’s a jsfiddle thing, it could be that it doesn’t like the string, as it’s so huge? I’ve generally not used base64 strings on IDEs, only locally.
1 Like
Yep. And there aren’t any other messages I get from it.
Here is the updated code:
// Function to fade in and out the image
function fadeInOutImage() {
let img = document.createElement("img");
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5CRsVrXxQycPK3Xg0b7zxKGHc4gH6QXRF_Q&s";
img.style.position = "absolute";
img.style.top = "50%";
img.style.left = "50%";
img.style.transform = "translate(-50%, -50%)";
img.style.width = "400px";
img.style.height = "auto";
img.style.opacity = "0"; // Start at 0% opacity
img.style.transition = "opacity 1s ease-in-out";
document.body.appendChild(img);
// Create an audio element and base64 value
let audio = document.createElement("audio");
audio.src = "data:audio/mpeg;base64";
audio.autoplay = true;
audio.loop = false;
audio.style.display = "none"; // Hide the audio player
document.body.appendChild(audio);
// Fade in to 70% opacity and start audio
setTimeout(() => {
img.style.opacity = "0.7";
audio.play();
}, 100);
// Fade out back to 0%
setTimeout(() => {
img.style.opacity = "0";
}, 2000);
// Stop and remove the audio and image after animation
setTimeout(() => {
img.remove();
audio.pause();
audio.remove();
}, 3500);
}
I took out the actual base64 text because it’s too long to put into here
So no one will be able to replicate the problem?
Do you get an error when you try to create a message where with the full string?
Maybe it’s too long for jsfiddle?
Not so that no one will be able to replicate it, but because I literally can not fit the text due to character limits in the forum. I get the error after pasting the base64 text, when it tries to auto save. I think that you’re probably right with the issue being that it’s just too long for jsfiddle, so I’ll most likely have to try and find an alternative to the src.
Is it similar with jsfiddle, it’s able to save when you remove the long string?
Yes, everything works properly when I remove the string
Sorry, my suggestion wasn’t especially helpful! I’ve never tried audio hosting sites so I can’t offer advice with that, but another option (still using base64) would be to compress the audio file before encoding, though that could have rather undesirable results on the audio quality. I don’t know how small the file would have to be for it to work on jsfiddle either.
EDIT: Fwiw, I just went on jsfiddle, created a single audio element and put a base64 audio string in the src attribute and it worked. That one was about 120kb.
It works for me as well on jsfiddle. Did you remember the comma before the data segment?
Why not just host it somewhere. Code it locally and host it on GitHub pages, Surge.sh, Netlify, etc. That way you can use the audio file.