The audio is being played into the laptop and PCs but it is not playing in ipad. I tried in different ipads but it is not playing the audio.
<script>
jQuery(document).ready(function(){
var audioElement = document.createElement('audio');
audioElement.type='audio/mpeg';
audioElement.setAttribute('src', '/*file url over here*/');
audioElement.setAttribute('autoplay', 'autoplay');
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
audioElement.play();
});
</script>
You need to ensure you have made a srcset, that covers all supported codecs on all devices / browsers.
http://en.wikipedia.org/wiki/HTML5_Audio#Supported_browsers
I have found the answer. The $.get(); should be jQuery.get();
Related
On my site arielledubois.com, I cannot get my homepage video to play in Safari only. Here is the JS code that I have set in place:
setTimeout(function(){
document.getElementById("bgvid").play();
}, 3900);
I've read that Apple blocks autoplay so you have to click to activate the video; but does anyone know a workaround for this?
I think you'd better use 'canplaythrough' event.
var video = document.getElementById("bgvid");
video.oncanplaythrough = function() {
video.play();
};
video.src = "your_video_sourse";
I have a web app that uses the HTML5 <audio> tag and for some reason, while it works fine on Windows and Mac PCs, it doesn't work on iOS and Android.
Here's a relevant snippet of my code:
Javascript:
var audioElement = document.querySelector('#audioplayer');
var source = document.querySelector('#mp3');
source.src = tokObject._url;
audioElement.load();
audioElement.play();
HTML:
<center>
<audio id="audioplayer" style="width:480px;">
<source id="mp3" src="random-placeholder" type="audio/mp3" />
</audio>
</center>
You normally can't autoplay audio or video files on mobile devices, this is often a restriction by the OSes such as Android and iOS to stop sites from downloading huge media files and autoplaying them.
If such code is called from within a click or touch handler, it will probably work, but not the way you are currently doing it.
Also, the <center> element has been deprecated and you shouldn't use it anymore.
Not sure if this helps but I did this instead and it worked for me. While I am not playing an MP3 I am getting a voice to prompt the user through a loop.
function speak(text) {
var msg = new SpeechSynthesisUtterance();
var voices = speechSynthesis.getVoices();
msg.voice = voices[2];
msg.voiceURI = 'native';
msg.volume = 1;
msg.rate = 1;
msg.pitch = 1;
msg.text = text;
msg.lang = 'en-US';
speechSynthesis.speak(msg);
}
// insert this bottom bit to call the function and it will read in the mobiles native voice what you type in ie....rest works on android have not tried iphone.
speak('rest');
Have you tried it doing this way :
var aud=new Audio(file.mp3);
aud.play();
I want to play blob data (mp3).
I wrote code like this.
This code successfully doing in PC browser.
But Mobile browser cannot play.
//javascript source
var url = URL.createObjectURL(blob);
audio = document.getElementById("audio");
audio.src = url;
audio.load();
audio.play();
//html source
<audio id="audio" type="audio/mp3">
</audio>
I deleted codes. so I re-post.
startPlaying function will be called by button click action.
var blob;
// blob object has been created other logic.
function startPlaying(button) {
var url = URL.createObjectURL(blob);
audio = document.getElementById("audio");
audio.src = url;
audio.load();
audio.play();
}
For Chrome on Android, this does not seem to be possible - there is currently a bug for it.
(it was closed and marked as fixed, but as you can see from the comments, doesn't work for everyone - including myself).
I needed only a localhost solution. My problem was solved when I enabled in chrome//flags the flag #enabled-unified-media-pipeline on Android.
So I'm trying to play audio in all browsers it works in all others but anything in iOS. I do understand that iOS doesn't allow auto play but as shown I am using another button to trigger the play.. What am I doing wrong?
audioElement = document.createElement("audio");
audioElement.setAttribute("preload", "none");
audioElement.setAttribute("id", "audioPlayer");
document.getElementById("PlayAudio").appendChild(audioElement);
var source_sound = document.createElement("source");
audioElement.appendChild(source_sound);
source_sound.setAttribute("src", 'somefile.php/something.wav');
$("#playButton").click(function (e) {
audioElement.load();
audioElement.play();
)};
I'm trying to find a way to serve the correct video format (I have my videos encoded in h264 and webm ) when the videos are loaded dynamically onto a canvas using the function below:
function loadVideo(video_path){
var ctx = document.getElementById('c').getContext('2d');
var vid = document.getElementById('v');
vid.src = video_path;
vid.load();
// play the video once it has loaded
vid.addEventListener('canplay', function(e){
vid.style.display = "block";
vid.play();
}, false);
// hide the video container once the video has finished playing
vid.addEventListener('ended', function(e){
vid.style.display = "none";
}, false);
}
Here is the simple html inside the body tag:
<video id="v" type="video/webm" width="960" height="500"></video>
<canvas id="c"></canvas>
I could go down the user agent sniffing route to give me the correct video_path string but is there a more elegant way?
Modernizr is a nice way to detect browser features. It also tells you what format the video should have: http://www.modernizr.com/docs/
If video support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests ogg, webm and h264.