how can i add my music player for my website - html

i need with start button
I wrote it correctly but it doesn't work on the site.
<audio autoplay> <source src="file way" type="audio/mpeg"> </audio>

I encountered a very similar problem playing video. The folder path I provided as the "src" to the video file actually existed, but was outside the document root of the web application. Thus it was invisible and inaccessible.
When I changed the "src" to a folder within the document root, the webapp worked as expected.
Be sure src="path" points to a folder that exists somewhere within the document root of your webapp.
DocRoot is /Users/horace/Sites/VideoMash
Video files are in /Users/horace/Sites/VideoMash/videos
❌ <video src="/Users/horace/Sites/VideoMash/videos/xyz.mp4" ...>
✅ <video src="videos/xyz.mp4" ...>
Hopefully this addresses your problem.

Related

Github Pages won't load video from Git LFS

I have an index.html file that has a <video> element (stored in Git LFS) set up as a background, however GitHub pages recently stopped loading it - it did work just a few weeks ago. There are also no issues in the console.
On the local server it works as expected in any browser, also all changes were pushed to git.
Has anyone run into a similar issue and would know how to fix it?
<!-- The video -->
<video id="background-video" autoplay muted loop playsinline >
<source src="assets/animation/star_burst.mp4" type="video/mp4">
<source src="assets/animation/star_burst.mov" type="video/mov">
<source src="assets/animation/star_burst.mp4" type="video/webm">
</video>
Link to the file in case that helps.
Thank you
Your file was working a few weeks ago but is now moved to their Git Large File Storage which means that assets/animation/star_burst.mp4 is now a text file pointing to the storage location.
Try to specify direct access link. Something like https://media.githubusercontent.com/media/AnnaxT/AnnaxT.github.io/main/assets/animation/star_burst.mp4.
You can get it by clicking on "view raw" button on https://github.com/AnnaxT/AnnaxT.github.io/blob/main/assets/animation/star_burst.mp4
Or just upload less larger file.

How to auto play the audio when the web-page is opened from google drive link?

I have normal html file in that i add one audio tag with autoplay attribute , when the page loaded sometimes it's playing automatically sometimes it's not playing can you please help me to fix this issue ...
// src link is from google drive
<audio autoplay>
<source id="my_audio" src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL">
</audio>
Suggestion:
When I tested it on my end, I do not get the same intermittent issue with audio not auto-playing using HTML <audio> autoplay attribute with an audio source that's residing on Google Drive. Also, I have checked the public Google issue tracker and there's no active reports about audio from Google Drive not auto-playing when being used as an audio in an html file.
Perhaps, you can try this implementation from this similar answer:
Recently many browsers can only autoplay with sound off, so you'll need to add muted attribute to the audio tag, that is not make sense, so in my opinion the best way is adding document.getElementById('audio').play(); after your tag. Take a look at this code:
<audio controls loop style="display:none" id="my_audio">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<script>
document.getElementById('my_audio').play();
</script>
src and id above were tweaked to your actual code
You may also want to check the answers from How to make audio autoplay on chrome

How do I /actually/ link mp3 into html?

I've just started learning how to use this; unsure on how linking audio files into the script works. All I'm trying to do is have a small audio player.
<audio controls width="100" height="100">
<source src="somethin.mp3" type="audio/mp3">
<!-- Fallback for older browsers -->
Your browser doesn't support html5 audio
</audio>
have you tried checking w3 schools out?
https://www.w3schools.com/html/html5_audio.asp
There are ways to check for browsers in jQuery too. Make sure to check them out.
It all depends on the file location. For your script above you would put your somethin.mp3 in the same location as you html file. If you want to put it in a sub folder (say your folder containing the .mp3 was called audio) it would be <source src="audio/somethin.mp3" type="audio/mp3">. If it was in a second sub folder (say the second was called html_sound) then it would be <source src="audio/html_sound/somethin.mp3" type="audio/mp3">. If you want to go one dictionary up you would use <source src="../somethin.mp3" type="audio/mp3">. Two dictionaries up would be <source src="../../somethin.mp3" type="audio/mp3"> and so on.
Just copy the dictionary name to go into a folder and use ../ to go up one folder.
also your code does not end with </audio> tag (It MUST) and it's type="audio/mpeg" not type="audio/mp3".
Best test the script in Chrome, Edge or Internet Explorer (if you have Windows) are OK too but do not test it in Firefox or Opera as it supports .ogg files (I know W3schools says it does but all you need is an outdated browser and it will not work).
You might want to check this out.
If you have done links or images they are exactly the same.

html 5 audio tag in iOS/iphone 6 no longer working in a password-protected directory

I have a simple html 5 audio tag (below) on a page in a password protected directory.
The directory is protected by HTTP Basic authentication.
It was working fine on iOS7, on Safari. Now when I click on the Play button, nothing happens.
On other directories that are not password protected, it still works fine.
<audio controls>
<source src="audio/01-10r.mp3" type="audio/mp3">
<source src="audio/01-10r.ogg" type="audio/ogg">
<source src="audio/01-10r.wav" type="audio/wav">
</audio>
OK, just a hunch here but if its working for you in other directories I would say check your source from which your loading the file. If it's working in one directory and not the other I'd say its not loading the file correctly using the "src" source you have set. But if you want to post more details about your structure I don't mind looking over it further.
According to W3 here's the browsers it supports

html5 audio mp3 path not working on IE9

I'm a webmaster and I'm managing multiple website in a single server. I used "virtualhost" to dispatch each website url to the right folder under arn.ae.
So the main url is arn.ae which is the root of my server and radioshoma934.ae is a sub website pointing to a subdirectory called shoma.
In IE9, I discovered that when I use the subwebsite url to point to my audio like this:
<audio controls="controls">
<source src="http://radioshoma934.ae/vincent.mp3" type="audio/mp3" />
</audio>
--->The audio is not loaded but if I'm using a full path like this :
<audio controls="controls">
<source src="http://arn.ae/shoma/vincent.mp3" type="audio/mp3" />
</audio>
---> It works.
Any body know what configuration is needed in my server to make my subwebsite url working?
It is because src="http://arn.ae/shoma/vincent.mp3" is the root address of your server It is the exact location of the file. The First one src="http://radioshoma934.ae/vincent.mp3" is pointing to arn.ae/shoma/. The src tag requires the direct link to the media on the server. and the root url arn.ae/shoma/* is the root path.
you can try doing src="/shoma/vincent.mp3" a relative link.
Hope that helps