I use the html5 audio library Buzz to add sounds to a browser game. There is a toggle button to mute and unmute sound, which works good on desktop and Android devices. Unfortunately it seems like the audio tag is quite limited on IOS, so that I cannot mute audio in Mobile Safari (see https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html):
On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.
Do you know any workaround to control volume of html5 audio tags in Mobile Safari?
To add volume change support to iOS and not rewrite your entire app from html5 audio to web audio for that, you can combine these audio solutions via createMediaElementSource.
Please see more details at Mozilla website https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource
I always thought dynamic volume control and certainly crossfading, as we all know, is impossible. Apple has dictated that it be so. Except.... apparently the folk at Kodo Games (specifically Nicola Hibbert?) have pulled it off and made the code available to anyone. I just checked it on iOS 8. Fading and crossfading seem to work!
Check it out (new site that works): Getting Started with Web Audio API
It seems that you can set the muted property instead of updating the volume value. Works on iOS 15
/**
* Set volume of sound object
* #param volume
*/
setVolume (volume) {
const muted = volume === 0
// iOS workaround when volume is 0
this.sound.muted = muted
this.sound.volume = volume
}
I worked around this by simply stopping all sounds and setting a variable isMuted to true or false, so I can check this everywhere a sound is played:
// set the variable
var isMuted = false;
// toggle audio
function toggleMute() {
var toggleAudioBtn = $(".toggleAudio");
if (isMuted == false) {
sounds.stop();
isMuted = true;
toggleAudioBtn.css("background-image", "url('images/ui/btn_audio_mute.png')");
} else {
isMuted = false;
toggleAudioBtn.css("background-image", "url('images/ui/btn_audio.png')");
}
};
// for every sound check if sound is muted
if(isMuted == false) {
sound.play();
}
Related
The code below works fine on desktop browsers (plays music). But when I try to open the site on any mobile device it doesn't work.
var music = new Audio("mscs/gamemusic.mp3");
function playmusic() {
music.controls = false;
music.loop = false;
music.autoplay = true;
document.body.appendChild(music)
}
I use it in a function when game starts:
function createnewgame() {
...
playmusic();
...
...
}
Does anyone know what's wrong?
Well, this is clearly a browser support issue. According to caniuse, the <audio> element (and js' Audio object is an interface used for it) has known support issues, including
iOS and Chrome on Android do not support autoplay as advised by the specification
and others. Not sure if this can be overcome by some library but since the limitation of autoplay was introduced by design, I wouldn't count on workarounds...
Instead of adding the var "music" to html body, you can try playing the audio directly from JavaScript.
function playmusic() {
music.play();
}
Some mobile browsers support automatic playback of audio, but ios, chrome and others require interactive actions to trigger the sound playback.You can try working with the mute attribute...enter link description here
I have set up an Html5 video and it has the basic controls. However, the video I uploaded is quite heavy and I would like to give a lower resolution option, like an HD switch control. I looked on the internet on how to apply an HD button to html5 but the primary solution seems to install a video player. Is there a simpler way to implement an HD button without needing to install the video player? I already set up my html5 video with several jQuery commands and I would not like to go through the effort of starting from scratch again. I also looked that one could customise the html5 video controls as well. Would one be able to set up a customised HD button through html/javascript only? If yes, how one does it?
Here's the code I have at the moment
<video src="../Frustrated/Frustrated.mp4" controls preload="metadata"> <source src="../Frustrated/Frustrated.mp4" type="video/mp4">
you could probably make this look a lot more elegant, but the code sample below will allow you to have buttons which change the source between HD and regular versions (based on the ID of the button, but you can change the logic if needed). The code also checks to see if the browser supports mp4, ogg or webm and defaults to the first supported format (so you'd potentially need encodes for each type if you make use of that part of the code
<video width="400" controls id="video">
<source src="../Frustrated/furstrated.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<br>
<button id="frustratedHD" onclick="playvid(this)">HD</button><button id="frustrated" onclick="playvid(this)">Regular</button>
<script>
// gets the video element
var video = document.getElementById("video");
// sets the extension / container we'll use
var vidType = "";
// identifies what type of video we can play, assuming this is an HTML5 supporting browser
if (video.canPlayType) {
if (video.canPlayType('video/mp4; codecs="avc1.42E01E"') == "probably") {
vidType = "mp4"
} else {
if (video.canPlayType('video/ogg; codecs="theora"') == "probably") {
vidType = "ogg"
} else { if (video.canPlayType('video/webm; codecs="vp8, vorbis"') == "probably") {
vidType = "webm"
}
}
}
}
// you'll want to decide how to handle no supported video type...
function playvid(vid) {
// log selected item to confirm selection, can comment this line out
console.log("../Frustrated/" + vid.id + "." + vidType)
// set the video element source to selected content and correct type
video.src = "../Frustrated/" + vid.id + "." + vidType
video.play();
}
</script>
Upload the video in different qualities to your server, and play a different video depending on the quality the user has chosen.
Even if it's possible to downgrade a video on the client side, it's pointless, because the client still has to download the HD video in order to convert it.
I am working on a project based on jquery animation its animation works fine on desktop (Firefox,chrome,opera,IE) also support HTML 5 audio tag but in Ipad/iphone/ Android safari audio tag doesn’t support.Its works fine on Ipad/iphone/ Android firefox.i have searched it in many forum don’t get desire Result. I have used this function :
function playmusic(file1,file2)
{
document.getElementById('music11').innerHTML='<audio id="music1"><source src="'+file1+'" type="audio/ogg"><source src="'+file2+'" type="audio/mpeg"></audio>';
$("#music1").get(0).play();
}
I have called function like : playmusic(2.ogg','2.mp3');
If I give autoplay in audio tag it works but play method not working and I have to use play method as in my application needs sound in particular event see the link
http://solutions.hariomtech.com/jarmies/
I have also changed my function and give direct audio tag in div and call function the same problem I face as I mentioned above. I need sound play in background without any click.if I use auto play method so it play sound only one time but I need sound multiple time on event.
Try to add an autoplay attribute on the audio tag:
function playmusic(file1, file2) {
document.getElementById('music11').innerHTML='<audio autoplay id="music1"><source src="'+file1+'" type="audio/ogg"><source src="'+file2+'" type="audio/mpeg"></audio>';
}
I would however recommend building a proper element and insert that into the DOM - something like this:
function playmusic(file1, file2) {
var audio = document.createElement('audio');
audio.preload = 'auto';
audio.autoplay = true;
if (audio.canPlayType('audio/ogg')) {
audio.src = file1;
}
else if (audio.canPlayType('audio/mpg')) {
audio.src = file2;
}
document.getElementById('music11').appendChild(audio);
}
I'm working on a mobile device running iOS.
I have a DIRECT download link to an audio file (when I open it on desktop the download starts immediately). I try this but it plays only one time.
<script>var audio = new Audio("'+downloadUrl+'");</script> <button onclick="audio.play();">Play</button>
I also try to catch it with an <iframe> but it plays only one time.
When I use <audio> ,"streaming" appears and I have the same problem :
I think it's because my file is not saved on my phone. So how can I fix it, so that it plays as required.
Thanks in advance,
Let's take a look at the HTMLMediaElement DOM interface and Media Events
var audio = new Audio(downloadUrl);
audio.addEventListener('ended', function () {
audio.currentTime = 0; // seek to position 0 when ended playing
/* // alternatively, not sure about compatibility
audio.fastSeek(0);
*/
});
If you wanted it to loop rather than be playable again, set loop to true instead.
I am creating a page specifically for an ipad.
I have 12 audio players on a page. I need only one audio player to play at a time. The code below will work but only after you have started and stopped the players once. When you first play the songs it is possible for them all to play at the same time. Any ideas?
<script>
var currentPlayer;
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
if(currentPlayer && currentPlayer != thissound) {
currentPlayer.pause();
}
if (thissound.paused)
thissound.play();
else
thissound.pause();
thissound.currentTime = 0;
currentPlayer = thissound;
}
</script>
HTML
<a href="card3_ipad.php?card=country" onClick="EvalSound('song1'); return true;"
target="iframe"><img src="images/countrytab.gif" border=0 width=128 height=29>
</a>
<a href="card3_ipad.php?card=blues" onClick="EvalSound('song2'); return true;"
target="iframe"><img src="images/bluestab.gif" border=0 width=128 height=29>
</a>
Cheers
Tom
Read apple guideline
it is not possible for ios (iphone, ipad), you can check above link
Multiple Simultaneous Audio or Video Streams
Currently, all devices running iOS are limited to playback of a single audio or video stream at any time. Playing more than one video—side by side, partly overlapping, or completely overlaid—is not currently supported on iOS devices. Playing multiple simultaneous audio streams is also not supported. You can change the audio or video source dynamically, however. See “Replacing a Media Source Sequentially” for details.