I'm using the HTML5 audio tag to create a music player on my remote server. The audio tag works as expected when one computer is playing.
However, I'm getting a problem where if two computers are trying to play the same audio file, one of them will not stream until the other has paused its playing, finished streaming, or stopped streaming.
Is there some programming/server configuration that lets me stream the same file to multiple devices at the same time?
Here's the code, as requested
<html>
<body>
<audio id="jukebox" controls>
<source id="musiclocation" src="/music/test.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Related
I am trying to get a live stream from an online radio link. When I run the URL in the browser, I get it playing but if I insert in a HTML audio player then it changes the URL from HTTP to HTTPS and does not play it.
here is an example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio controls>
<source src="http://80sbeats.cyberbeats.net:8000/stream?icy=http" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Any idea why it does not play it?
I am trying to use tag to play mp3 in a page. The website is based on WordPress. The audio players do not appear in safari but working others browser.
This is the page url: http://soundhealingcenter.com/love/braintests/
Here is the code I am trying to use:
<audio controls="controls">
<source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>
The audio players * do appear* in Safari, and the audio can be played back properly. It just seems that all audio is loaded simulataneously, and since each one is about 20 minutes, that takes a lot of time, also depending on connection speed. In my case, the second one finished loading first, then 4, 5, 9, 10. The others are still loading (and can't be started yet therefore).
So you might want to consider deactivating the automatic loading on page load by adding the attribute preload="none" to the audio tag, so that would be
<audio controls="controls" preload="none">
<source src="http://soundhealingcenter.com/online/BetaA.mp3" type="audio/mpeg" />
</audio>
I also faced a issue like this and by preload attr in audio tag fixed it.
Since my audio files are small, i used preload = auto. Safari will start playback only once the complete audio is downloaded.Here is my Ref:https://codepen.io/aravi-pen/pen/OxPaVb.You can Refer here for more about preload tag:https://html.com/attributes/audio-preload/
Thanks!
Here follows the code snippet am using where TextToSpeech is a servlet which returns audio stream (via ServletOutputStream).
<audio autoplay controls>
<source src="/TextToSpeech?input=Welcome" type="audio/wav" />
Your browser does not support the audio element
</audio>
But Chrome browser is NOT auto-playing the audio. Can any one help me please?
P.S: I did test the audio stream by saving it to a file and it played well. So no issue with audio that returned from the server.
On mobile the audio autoplay function is usually disabled in order to avoid data traffic usage without explicit action from the user.
You could workaround that using javascript, when the page is loaded (i.e. jQuery.onready() ) you can start playing the audio file with something like that:
var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();
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>
I am developing a web app which will be able to live stream or at least send video files which both user can access at same time.
I am using HTML5 and node.js
Is this a linux machine? I would recommend ffmpeg's ffserver for streaming. It gives you many configuration options and runs stable on my machine here. Like that you could convert your streaming source to the format you need for your player.
Instead of streaming, we can do one thing
If you have a server machine then upload that audio/video on that server machine.
You can upload in Node.js with the help of formidable module.
And since HTML5 allows video and audio so no need of flash player, just make sure the audio/video will be compatible in all browsers (for videos, mp4 works in all major browser Check this link for more information on HTML Videos). And after upload send a command(video location) from server to all clients which plays the video from the desired location in javascript
<html>
<body>
<video id='videoPlayer' width="320" height="240" controls="controls">
<source id='mp4Source' src="movie.mp4" type="video/mp4" />
<source id='oggSource' src="movie.ogg" type="video/ogg" />
</video>
<!-- You MUST give your sources tags individual ID's for the solution to work. -->
<script>
socket.on('videoLocation',function(data)
{playVideo(data);});
function playVideo(location){
var player = document.getElementById('videoPlayer');
var mp4Vid = document.getElementById('mp4Source');
player.pause();
// Now simply set the 'src' attribute of the mp4Vid variable!!!!
// (...using the jQuery library in this case)
$(mp4Vid).attr('src', location);
player.load();
player.play();
}
</script>
</body>
</html>