Can't get my audio file to play on webpage

html5
audio

#1

So I’m now studying how to embed multimedia files onto web pages. I’m currently using codepen.io I’ve succeeded in doing it with youtube videos but I’m having problems getting it done with audio files. The code I’m using is this, is this correct or is something broken here?

So far all I get is the rectangular playback bar where I can see the triangular “PLAY” button and a straight line, but it’s all very faded and whenever I click on the play button it refuses to play. Any ideas on what I can do to fix this?


#2

Should that be,

MPEG-1 Audio Layer-3

?


#3

I tried it out and that doesn’t work either


#4

What about just,

audio/mp3

?


#5

no, neither does that one. any others?


#6
audio/mpeg

Do you really need a <source> element for only a single format?

Another question would be how would Codepen have access to your local files? Can you point to a web based file?


#7

No it’s from my itunes. I was assuming that the code would transfer the file from my itunes to the net, like a download.


#8

Not possible. You will have to physically upload it somewhere and let it be served from there. Our hard drives are off limits to the web (for security reasons). I would remove that URL before someone else sees it (including your OP).


#9

Why’s that? Could someone hack into my computer?


#10

I’m no expert, but it is folly to expose our local resources over the network, and definitely never upload to or download from sites that are not 100% trustworthy.


#11

Ok do you know of any sites which are 100% reliable for me to upload files to?


#12

That I cannot answer since I never do that sort of thing, myself. You may have to look into it, and be sure to check with Norton and other authority sites that oversee and rate sites, investigate complaints, etc. before settling on one. Search the web for the site name and dig for any reports of malware, malfeasance, etc.


#14

Hi @failla1986, just to add on with a possible suggestion, note that I never try this, but you can try upload the audio file to a trustworthy (trustworthy or not it’s subjective, to each of their own) cloud services like Dropbox/ Box/ OneDrive/ GoogleDrive etc (no advertisement intended as these are major cloud services), set the file into public mode and get the direct link to it.

Put the cloud link inside your code and see if it loads. Youtube works because the file is already uploaded into their server, anyone with the link can load the video unless it’s set private from the uploader’s setting. Since you’re using an audio file, SoundCloud come across my mind as it’s a web service famous for hosting audio file, still, I never try this. I think it’s plausible though.

Good luck :slight_smile: