<audio>element on Android phone - html

I have 'gogo' folder that includes both an html file 'test.html' and an mp3 file 'test.mp3'.
The html file is as below:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="test.mp3" type="audio/mpeg">
</audio>
</body>
</html>
I place the folder in pc and click the html file, and test.mp3 plays.
But when the folder is placed in my Android phone and I tap the play button, test.mp3 does not play.
as stated above, I placed the gogo folder in my Android phone and tapped the play button of the control, but test.mp3 does not play.
How should I change my codes?
ps: When I tap the mp3 file in the gogo folder on the phone, it plays normally, but I want to be able to play the music via Control.

Related

Embedding ogg audio livestream to wix page

I'm hosting on wix and want to embed a simple audio player to play a livestream. I have tested the code in w3schools and the audio plays. However, when viewing the wix site with the same code embedded, the player loads with a runtime of 0:00 and won't play, even when clicked.
I can only assume there is a conflict with the iframe wix runs the code in.
The live page is at https://www.joetimothycoleman.com/bewilderments-22
Any solutions welcome!
<html>
<Head>
</head>
<body>
<audio controls autoplay>
<source src="http://locus.creacast.com:9001/slawica_puszcza_zielonka.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>

Please explain why my mp3 file won't play

I'm watching a Youtube video to learn HTML and CSS.
https://www.youtube.com/watch?v=cyuzt1Dp8X8&t=5566s
I downloaded an mp3 file to my computer, but when I run my code, the audio file doesn't play. In my HTML code, I used the name of the audio file rather than the path. I know the name of the mp3 file is correct. However, by using the path rather than the file name, I have been able to play the audio in my browser. Again, the first code will NOT play the audio file, but the second code will play the audio file.
<audio controls>
<source src="CouldItBeKP.mp3" />
</audio>
<audio controls>
<source src="C:\Users\james\Downloads\CouldItBeKP.mp3" />
</audio>
Also, the author of the Youtube video believes the location of the audio file matters. For example, the audio file won't play if I move the mp3 file from Desktop to Downloads or vice versa. The code is below.
<audio controls>
<source src="CouldItBeKP.mp3" />
</audio>
Please help! Thanks.
When you do not specify the full path, most browsers will assume that the file is in the same folder. So if your code was in ~\Documents, but the audio was in ~\Downloads, it would not play. If they were both in ~\Documents, it would play.
You need the path to be correct, without the path it greys out. Put it in your main directory and try ./CouldItBeKP.mp3
it seems like your audio files are on the downloads folder, but I'm not sure where your code is.
I would suggest you move your audio files and your codes to the same directory.
For example, if my HTML file is in
C:\Users\james\project
My music files also should be also in C:\Users\james\project or somewhere near this folder. Eg: C:\Users\james\project\music
Now, let's assume, my music files are inside C:\Users\james\project\music while my HTML file is in C:\Users\james\project
So, my code for playing the music would be like this.
<audio controls>
<source src="music/CouldItBeKP.mp3" />
</audio>
Or
<audio controls>
<source src="./music/CouldItBeKP.mp3" />
</audio>
./ means to start from the current folder. In our case, which is C:\Users\james\project
Then your second code will also play the audio.

Why the video in the chrome page is not working?

So I am new to HTML and I am working on Visual Studio Code. I am currently trying to make a page that has a video on it. I made a simple code that I thought would work but it doesn't. After entering the page you see the video player but the video is not playing. The name of the video is bodybuild.mp4 and is located in videos.
This is my code:
<html>
<head>
<title>Video_page_test</title>
</head>
<body>
<video controls>
<source src = "videos/bodybuild.mp4" type = "video/mp4">
</video>
</body>
</html>
Possible solutions:
Try using an absolute path (ie: C:/user/videos/video.mp4)
Or
Put the videos folder in same place as your HTML file before testing in a web browser (double click the HTML file in Explorer, not just running HTML via debugger/IDE).

Embed audio player HTML

I am a newbe in HTML and I want to embed an audio player which plays an mp3 file from a link from dropbox. I took a sample code from here however, is doesn't work. It opens a player but doesn't play. This is the relevant part of the code:
<audio controls>
<source src="https://www.dropbox.com/s/8besx3yh043u4qn/TestFile.mp3?dl=0" type="audio/mpeg">
</audio>
You point to the wrong source. This link actually points to a html file whose name is rewritten by the web server software. (If I follow this link, a file that starts with <!DOCTYPE html> is opened, that is an indicator that this file is an HTML-website)
If you do a right-click on the player and select to examine the element you'll find the real link to this file under the preview-auto_container element.
So the audio element of your file needs to look like:
<audio>
<source src="https://dl.dropboxusercontent.com/content_link/KRfRP3OWPuNXyfpYKUjCQOUzNIoE6o66TvxCHu6xKh5fErZ22kJHCOCvJ0TeCccu/file?dl=0&duc_id=dropbox_duc_id" type="audio/mpeg">
</audio>

HTML5 play local audio file (c:\classical\chopin.wav) in google chrome

How to play local audio file (c:\classical\chopin.wav - no file selection) in Google Chrome using HTML5 coding?
I'm not on a Windows machine right now. But you should try
<audio src="file:///C:/classical/chopin.wav" controls ></audio>
Of course, this only works, if the webpage is viewed locally on your machine.
Keep your audio file in html folder and this code will work.
<audio controls>
<source src="chopin.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>