I'm currently working on a small project with a friend of mine. We're playing around with a VR simulation that requires audio instructions. Everything seems to work fine in the web version. The web version also works on mobile devices. However, when you enter VR-mode on any mobile device the audio doesn't play.
We have tried chrome, safari and firefox. None of them seem to work. We have tried different versions of A-Frame but that hasn't worked either. No errors are given, so I have no idea what could be wrong.
This is what we currently have in our index.html:
<audio id="js--instructie2" controls>
<source src="objects/instructie2.mp3" type="audio/mp3">
</audio>
<audio id="js--instructie3" controls>
<source src="objects/instructie3.mp3" type="audio/mp3">
</audio>
as for our main.js:
var instructie1 = document.getElementById("js--instructie1");
var instructie2 = document.getElementById("js--instructie2");
var instructie3 = document.getElementById("js--instructie3");
var instructie4 = document.getElementById("js--instructie4");
var instructie5 = document.getElementById("js--instructie5");
var instructie6 = document.getElementById("js--instructie6");
var uitlegArray = [instructie1, instructie2, instructie3, instructie4, instructie5, instructie6];
uitlegArray[uitleg].play();
I thought that Audio would work fine in VR-mode given the fact everything works perfectly in the webversion. But appearently it's not that simple.
For everyone having the same issue: Try out the howler plugin. I started trying out different methods and finally solved the issue. I eventually ended up having to use howler.min.js . It's basically an audio library. Still have no idea how that resolved the issue though, so I'm sorry but I can't provide an answer on why it didn't work to begin with.
You can read more about it on their website:
https://howlerjs.com/
Related
This question has been asked and solved various times, but the fixes I've found on SO haven't been working for me so now it is my turn to ask.
My audio tags work just fine in chrome and Edge, but not IE11.
In the advanced media settings I have play web audio enabled, I have this in my head tag although probably not necessary:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I have <!DOCTYPE html> at the top with no comments above or whitespace.
My audio tags are created as such:
$("body").append($("<audio id='<%=aCodeElement.getDescription()%>'> <source src='<%=aCodeElement.getCode()%>' type='audio/mpeg'></audio>"));
And in the browser they look like:
<audio id="RingTone01">
<source src="http://10.37.0.102/console/sounds/ringtones/Ring-Tone-01.wav" type="audio/mpeg">
</audio>
They are triggered as follows:
for(var i = 0; i < soundlist.length; i++)
{
if (soundlist[i] == tone)
{
document.getElementById(soundlist[i]).play();
}
}
I've ran the debugger to ensure that IE11 can find the right element, but it does not play the audio. Typing in something like
var audioelem = document.getElementById("RingTone01");
audioelem.play();
Console just says undefined and no audio plays. Any help would be greatly appreciated.
And one last thing, html5test.com says my internet explorer has no Web Audio API, whereas chrome does, so perhaps this might point to something.
IE11 doesn't support wav files, so I created a test mp3 file and the audio tag worked.
I'm a web developer at a radio broadcaster. Since the release of IOS 11, we received several user complaints that our audio live streams can't be played on IOS 11 devices anymore. To embed the streams in our websites we use the HTML5 AudioElement. When debugging the javascript on an iPhone whit IOS 11 we recognized that calling the audio elements play() method resulted in a MediaError of ErrorCode 4 (MEDIA_ERR_SRC_NOT_SUPPORTED). All other devices (Android, Windows and IOS 10 and below) play the streams without any problem.
I created a little codepen example
<audio controls>
<source src="http://hr-hrinfo-
live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3"
type="audio/mpeg;codecs="mp3"">
Your browser does not support the audio element.
</audio>
https://codepen.io/ampersand83/pen/pWwgKm in which I just create an AudioElement via the AudioTag and hand the source Tag one of our stream URLs.
Devices running IOS 10 and below play the streams without any problem as well as current android or windows devices. However, a device running IOS 11.0.1 can't play the stream. I can't find any information on why this wouldn't be possible anymore. Does anybody have an idea why our streams won't work anymore and can give us advice on what we can do to make them work again?
This issue is down to Apple WebKit changing in the latest iOS release. For users running KH Icecast a fix can be expected soon (hopefully!) https://github.com/karlheyes/icecast-kh/issues/172
Adding a simple audio control like this
<audio controls>
<source src="https://swr-swr3-live.sslcast.addradio.de/swr/swr3/live/mp3/128/stream.mp3" type="audio/mpeg;codecs="mp3"">
</audio>
…does not play.
While this one does:
<audio controls>
<source src="http://mp3-live.swr3.de/swr3_m.m3u">
</audio>
The only difference I can spot is that on an MP3 it fails while a M3U playlist works.
On iOS 10 and below as well as on current macOS Safari, it works both.
Also Chrome on iOS 11 fails (same Webkit engine?!)
I saw this same issue when trying to load a local HTML file with audio controls into a UIWebView. However, my file was an .m4a audio file. I found that just removing type did the trick. So my HTML looked like this:
<div class="audio"><audio controls><source src="my_local_audio_file.m4a"></audio></div>
Using type=audio/mp4 also worked for me. So I'm guessing it's an incompatible mime type and just removing the type would be the best option.
Hope this helps.
I'm having a bit of difficulty understanding why this works in some cases but not in others.
My goal is to display the video, play it for 5 seconds, pause for 5 seconds, then continue playing.
I have put an alert so I can see if the pause function exists, which it does in every case I have tried (alert appears with "function", if it didn't exist it would say "undefined")
HTML
<video id="previewvid" width="320" height="240" autoplay="autoplay" controls="controls" poster="http://anotherwebsite/image">
<source src="http://anotherwebsite/video.mp4" type="video/mp4">
Video unavailable
</video>
JS
$(document).ready(function() {
alert (typeof document.getElementById('previewvid').pause)
document.getElementById('previewvid').play()
window.setTimeout(function(){
document.getElementById('previewvid').pause()
window.setTimeout(function(){
document.getElementById('previewvid').play()
}, 5000)
}, 5000)
})
Experience:
On my desktop machine this works perfectly in Chrome, but on Firefox I get a MIME type error, I am not too fussed by that as this will be used 99.9% on mobile anyway.
On mobile devices, I have an HTC One M7 with all software up to date. The video can be played in both Chrome and the built in browser, but does not autoplay. I have the same result on iPhone 6.
I tried on an old Samsung (not sure what model, but several years old) and found the same problem in Chrome, but on the built in browser the autoplay worked perfectly as required.
I've googled this problem extensively and there doesn't seem to be any obvious reason why the play/pause functions are not reliable.
Is there any other way I can get around this issue? Or any explanation as to why these functions are so unreliable? Or am I doing something completely wrong?
edit: I should add, the "anotherwebsite" is a CDN where I am paying for the availability of the videos, they have confirmed everything at their end is set up correctly
I have the following HTML code, but it is not working, the video does not start...
Yet, when I test this code in my browser Chromium, it works perfectly.
Any idea of the problem?
<video width="576" height="324" controls poster="">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag or the file format of this video.</video>
My video is playing fine using your code(in chrome) without giving any troubles so, the problem is with the video you are playing but not the code.
due to Chrome removing support for h264, on some machines(it entirely depends upon the codecs installed on the computer), mp4 videos encoded with it will not work under certain circumstances these issues with video encoding formats in chrome leads the code to not working perfectly.
there are a couple of solutions in stackoverflow you can give a try:
MP4 not playing on Chrome version 27.0
html5 video issue with chrome
cheers!
I have a javascript that plays audio in the browser, using the html5 <audio> tag. It works fine in the iPhone browser, but not in Android. (Testing using a htc desire with android 2.1.) Anyone know why?
My code:
function playHTML5(sound, soundcv){
// sound = url to m4a audio file
// soundcv = div in which the audioplayer should go
var audio = document.createElement('audio');
audio.src = sound;
audio.controls = "controls";
if (currentSound != null){
soundcv.replaceChild(audio,currentSound);
} else {
soundcv.appendChild(audio);
}
currentSound = audio;
}
By the way, I am also trying to enlarge the audio button that shows up in the iphone (the default one is quite small), with no luck so far - would be grateful for any ideas!
The latest Android browser in FroYo does not yet support the HTML5 audio element. This is not a bug, rather a feature that has yet to be implemented. It may come in Gingerbread.
Update: The Gingerbread browser has the audio element.
Here is link to Google Android bug, which filed for lack of support of AUDIO tag in Android.
Please, vote on it.
http://code.google.com/p/android/issues/detail?id=10546
BTW, there is work around, which let you play natively MP3 in Android 1.6 .. 2.2, like that:
<video src="test.mp3" onclick="this.play();"></video>
I cannot figure this out either. BUT, this test page created by Apple plays HTML5 audio on the Android: http://www.apple.com/html5/showcase/audio
how did apple do it?
Have you checked your audio format ?
I was having trouble on my Kindle Fire, and found one small thing which seemed to fix it.
<audio>
<source src="someclip.mp3" type="audio/mpeg" />
</audio>
I had mistakenly been using "audio/mp3". I'm using a player without its native controls (using HTML5/JS).
I got this working on a project using trigger.io deploying to a Nexus 7 running Android Jellybean, but the audio only plays if I use absolute URLs at the moment. I'm not sure what the relative path is yet to use audio from within my project, but hopefully this will help somebody out...
(function() {
var currentSound;
// I have a div called "page"
var soundcv = document.body;
// This only works for one sound for simplicity's sake
function playSound(sound){
if (currentSound == null){
var audio = document.createElement('audio');
audio.src = sound;
soundcv.appendChild(audio);
currentSound = audio;
}
currentSound.play();
}
// This isn't a real audio file URL - replace it with one of your own
playSound('http://example.com/example.mp3');
})();
I've been tinkering all day on this and I finally got mine to work on my old Samsung Droid browser with the yahoo webplayer:
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>
Works great puts a little arrow icon next to the text that you can click to play your mp3. Thanks Yahoo.
I forgot to mention that the audio does NOT show up in my Chrome or Firefox browser when testing this locally. Works great on my phone browser though.
I know this is a hack, but it works everywhere (as far as I know)!
You can use the video element and convert your mp3s into mp4 and ogg files (ogg for firefox on android). You could also style it so it doesn't display any uneccesary default players. See code below:
<video id="audioTest" width="1" height="1" style="top: -100px; left: -100px; position: absolute;" preload >
<source src="audio.mp4" type="video/mp4">
<source src="audio.ogv" type="video/ogg">
</video>
You could then play it in your js code using:
var audioTest = document.getElementById("audioTest");
audioTest.addEventListener("ended",onSoundComplete,false);
audioTest.play();
in body
<audio id="myAudio" src="audio/bomba.mp3"></audio>
in javascript during the event
document.getElementById('myAudio').play();