I'm trying to play an audiofile from google translate in an html5 audio element. My code for this is:
<script>
$("#play_button").click(function(){
$("#memory")[0].play();
});
</script>
<audio id="memory" preload="auto" style="display: none; ">
<source src="http://translate.google.com/translate_tts?tl=en&q=hello">
</audio>
which normally would play a voice saying "hello". This works i safari but not in google chrome, where I want it to.
If I "preload" the sound once (loading the url in another tab) and then run this code on my page again, it works. Probably because the audio gets loaded into some cache. (I don't know that much about that...)
Is there anyway to track if the audio is loaded and get the browser to wait for that before trying to play the sound. Or is the solution to download the file to the server and then reference my audio by the new file?
The browser interprets html in the same order as it appears in the html file. If you move your script tag below your audio tag, it should load the audio before running the script.
Related
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
I have a .wav file that is being continuously appended to. Is it possible to play this file using the HTML <audio> element? Here is my current approach:
<audio controls="controls" autoplay="autoplay" preload>
<source src="stream.wav/" type="audio/wav">
</audio>
If I refresh the page, it reflects the new audio available in the file, but it does not render as a streaming player. It seems like it should be playing in "live" mode according to this question.
I would also be open to using some kind of framework or JavaScript to accomplish this if that would be best practice, but I haven't found anything yet.
Files cant end in /
src="stream.wav/"
Should be src="stream.wav"
In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.
https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#Server-side_Streaming_Technologies
That section of that page lists a few popular options for doing this.
Super green on some of this stuff so I apologize in advance.
I want host video files on my website and have them play in the browser. Currently, when going to the hosted file it just downloads the .mp4. Is there a way to set up a folder of videos to play the video in the browser automatically instead of downloading? I'm trying to avoid having to maintain html and embedding videos. I'd rather just send a url to the specific video and the end user only play that video in the browser.
I have the files hosted on Domain.com. Ideally, I would send a subscriber a link like "www.website.com/videofolder/video_name.mp4" and that video would just play in the browser. Is there a way to do this without making separate html files for each video?
You will have to send an html wrap with the link, this:
<video width="320" height="240" controls>
<source src="url/to/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Otherwise you'll just be sending a file stream, hence the download you're seeing.
I will also recommend you to explain:
How you're providing the file to the browser (Hosting),
Are you using NodeJS, Flask, Django, NGINX, AWS S3, etc.
So other contributors have more idea of how to help you out.
I have this html in index.php:
other
<audio id="music" controls>
<source src="music/music.mp3" type="audio/mpeg">
</audio>
And I need that audio was playing even if I click other.php. But when I click, so I want to play music where it was stopped on index.php.
Some ideas?
The window.onbeforeunload property allows you to register an function that runs when the user leaves the page.
The <audio> element has a currentTime property that tells you how much of the audio file has been played so far. If you set it to a new time, the audio element will skip to that point in the media file (although I think you’ll have to wait until the file has loaded).
You can save data from JavaScript to the user’s browser using cookies and, where supported, HTML5 Local Storage.
So — you could set a window.onbeforeunload handler function on index.php to save the currentTime of your audio element to a cookie or local storage, then set a window.onload handler function on other.php to read the saved currentTime and write it to the audio element there.
There Will Be Bugs. But it should be possible to make it work, give or take.
I have a simple HTML5 Audio player on my website like this:
<audio src="file.ogg" preload="none" loop="loop" controls="controls" >
Your browser does not support the audio element.
</audio >
I want that if the file was played to end the file should be reloaded. now if the file is played and I click on play again it plays the file which is in the clients browser cache. but I want if I click play the file should be loaded again from the browser.
You really cant.
What you can do is. that is what I would do at least .embed a js to be triggered when you hit play button(just a play image not the actual file) that should create a new audio tag.
that way it creates a new audio. Audio is super limited.
No way to control buffering, there was a flag at somepoint to disable the buffering they removed it.
If you have, for example, "stopped" the media with:
media.pause();
media.currentTime = 0;
//Just reload
media.load();
That should clear the buffer.