We Keep Coding

Audio file won't play when hovering over image - until a click event takes place on page [duplicate]

I'm trying to get a small sound file to play automatically using an tag and javascript to initiate it.
<audio id="denied" preload="auto" controls="false">
<source src="sound/denied.wav" />
</audio>
And then through javascript, at the appropriate time:
$('#denied')[0].play()
Works fine on Chrome on my desktop. In Android 4.1.1, the sound will not play, unless I hit "play" on the HTML5 audio controls before javascript attempts to play it.
So basically the Android browser (stock or Dolphin) will not play the audio unless the user initiates it at some point before the javascript. Is this intended? Is there any way around this?

Well, for my purposes, here's what I did:
Luckily, before the user can trigger the behavior to start audio, they have to click a button. I set the volume of the element to 0.0, and have it "play" when they click this button.
After the sound is played silently, I simply set the volume property back to 1.0, and it plays without user intervention just fine.

In my case this was an easy solution:
https://stackoverflow.com/a/28011906/4622767
Copy & paste this in your chrome:
chrome://flags/#autoplay-policy
My web app has many page reload so I can't force the user to press a button every time; but it is for internal usage, so I can force the users to use chrome and configure that option.

I know that in mobile safari any javascript call to play() must be in the same call stack as a user initialted click event. Spoofing the the click with a javascript trigger won't work either.
On my nexus 7 I can confirm that unless the javascript was triggered by a user click, it does not play.

The main issue is that sound (on iOS and Android) must be triggered by a user click. My workaround was very simple. Tie the audio.play() to a click event listener and then immediately pause it. From that point and on the sound works perfect.
var myAudio = new Audio('assets/myAudio.mp3');
...
button.addEventListener("click", function() {
myAudio.play();
myAudio.pause();
...
});

Here is a blog-post on the reason and how to overcome it by loading all the audio files on first user interaction and play them later in programmed manner: https://blog.foolip.org/2014/02/10/media-playback-restrictions-in-blink/ Adopting this approach a small javascript module is available on GitHub https://github.com/MauriceButler/simple-audio
I tried this simple approach on my own - worked seamlessly & great!

Luckily for me the html5 app I'm working on only needs to work in Android 4.1, but if you're trying to make something cross-platform you'll need to adapt this slightly. Neither setting volume to 0.0 then back or autoplay on the control worked for me. I also tried muted and that didn't work either. Then I thought, what if I set the duration and only play a miniscule amount of the file? Here's yet another hacked-together script that actually did work:
function myAjaxFunction() {
clearTimeout(rstTimer); //timer that resets the page to defaults
var snd=document.getElementById('snd');
snd.currentTime=snd.duration-.01; //set seek position of audio near end
snd.play(); //play the last bit of the audio file
snd.load(); //reload file
document.getElementById('myDisplay').innerHTML=defaultDisplay;
var AJAX=new XMLHttpRequest(); //won't work in old versions of IE
sendValue=document.getElementById('myInput').value;
AJAX.open('GET', encodeURI('action.php?val='+sendValue+'&fn=find'), true);
AJAX.send();
AJAX.onreadystatechange=function() {
if (AJAX.readyState==4 && AJAX.status==200) {
document.getElementById('myDisplay').innerHTML=AJAX.responseText;
if (document.getElementById('err')) { //php returns <div id="err"> if fail
rstTimer = setTimeout('reset()', 5000); //due to error reset page in 5 seconds
snd.play(); //play error sound
document.getElementById('myInput').value=''; //clear the input
}
}
}
}

You don't need JavaScript for autoplay, and I see several issues in your code:
<audio id="denied" preload="auto" controls="false">
<source src="sound/denied.wav" />
</audio>
I'd change it to (in HTML5 you don't need attribute="value" syntax in some cases, that's for XHTML):
<audio id="denied" autobuffer controls autoplay>
<source src="sound/denied.wav" />
</audio>
play!
In iOS autoplay is disabled, you need to click play button or put a user click event on custom controls like this with JavaScript:
var audio = document.getElementById('denied');
var button = document.getElementById('play-button');
button.addEventListener('click',function(){
audio.play();
});
or with jQuery:
$('#play-button').click(function(){ audio.play(); });}
Edit
Keep in mind that HTML5 is pretty recent technology (at least some functionalities), so browser compatibility and functionality changes every once in a while.
I encourage everybody to keep informed about the current status, as sometimes things start to be less hack-dependant, or the other way around.
A good starting point: http://caniuse.com/#feat=audio (check the tabs at the bottom).
Also for a global audio solution I recommend using SoundManager2 JS library

I met the same problem in my app. My application usage scenario was like this:
click the button to show a table with information (user action)
show the table and refresh data in it by AJAX
play sound when data has been changed
Fortunately I had the user action (step 1) so I was able to "initiate" the sound by it and then play it by javascript without the user action needed. See the code.
HTML
<audio id="kohoutAudio">
<source src="views/images/kohout.mp3">
</audio>
<button id="btnShow">Show table</button>
Javascript
$("#btnShow").click(function () {
//some code to show the table
//initialize the sound
document.getElementById('kohoutAudio').play();
document.getElementById('kohoutAudio').pause();
});
function announceChange(){
document.getElementById('kohoutAudio').play();
};

It happened to me too. Here's how I hacked this:
I set the audio to autoplay and set the vol to 0.
When I need it to play, I use the load() method and it will autoplay.
It's a light mp3 file and it plays every one hour/two hour, so this works fine for me.

PHP and JS to read if audio streaming is broken from HTML5

Right now I have a very basic HTML5 Audio player that play from webradio.
I use a old iPad to play the music but also to show some information from a webpage. The problem is that is happen sometime the wifi and the old iPad does not like to stay connect so it disconnect and reconnect and then the player stop play the webradio. I need somehow a script that notice in real time or every 1 min if the radio is not running and restart the player for me. I guess I can use Javascript but have search a Little and not find any good idea and it also have to work in Chrome. It looks that some javaScript does not work in specific webbrowser

Basically, your <audio> element will dispatch an error event. Just listen for that and then retry. You could also listen to the progress event to see when it starts receiving again and then call play from there. It'd be something roughly like this:
const audio = getAudioElement();
audio.addEventListener('error', () => { playing = false; /* handle error */ });
audio.addEventListener('progress', () => {
if (!playing) {
audio.play();
playing = true;
}
});

How to pause videos with Javascript

So i have a small problem in my website, first of all i made it with Wordpress, and i have a page with tabs every tab contain a video embedded from Youtube, my problem is when i passed from a tab to another the previous video doesn't stop, this is my code :
[tabgroup][tab title="Sport"]
[embedyt]https://www.youtube.com/watch?v=FVsgso273EE?theme=light[/embedyt][/tab]
[/tab]
[tab title="Action"]
[embedyt]https://www.youtube.com/watch?v=zuzaxlddWbk?theme=light[/embedyt][/tab]
[/tab]
[tab title="Strategi"]
[embedyt]https://www.youtube.com/watch?v=LKrRCADS7To?theme=light[/embedyt][/tab]
[/tab]
[/tabgroup]
and this is my page to understand the situation My-website
in my website you will find the videos tabs if you click in the SPIL menu item.
so plz if someone has any idea to do that i will be very appreciative :)

You can use the Youtube JavaScript API to do stuff like play, pause, seek to a certain time in a video, set the volume, mute the player, and other useful functions.
https://developers.google.com/youtube/js_api_reference
Just attach an event handler to your tabs that when clicked, get a reference to the current video, pause it then play the new one.
Here's a live demo of such functionality: https://developers.google.com/youtube/youtube_player_demo

If you are using HTML video tag you can use the code given below
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
Follow the given link as example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_met_play_pause

Play an SWF when a javascript button is clicked

I'm new to Javascript and to Flash, and I'm developing a browser Flash video recorder.
Right now, when I direct my browser to a certain URL, it asks for permission to access the webcam and starts recording - and streaming to a Red5 server on Ubuntu.
I now need to add a javascript button, which when clicked will start the recording, and when clicked again, will stop it. Can someone tell me how to play the .swf file only when the button is clicked? And how to stop playing it when the button is clicked again?
Thanks.

As Pete said, ExternalInterface is certainly what's needed to make function calls between a SWF and the surrounding HTML page.
You can also use swfobject to do cross-browser compatible SWF embedding/loading into a page dynamically.
I've made a little demo of the two features you're looking for here: http://akineticblog.com/fl/ExtIntDemo/index.html
The AS3 code for this is:
import flash.external.ExternalInterface;
var recording:Boolean = false;
//These are two TextFields instantiated on the stage as visual indicators
recordingTF.visible = false;
notRecordingTF.visible = true;
function recording_toggle():void {
recording = ! recording;
//Your actual record start/stop code would go here//
recordingTF.visible = recording;
notRecordingTF.visible = ! recording;
}
if (ExternalInterface.available) {
//This registers the AS3-side function to the JS-side reference
ExternalInterface.addCallback("recording_toggle", recording_toggle);
}
For the HTML/JS side, you can check the page source of the above link, but the main parts are:
function swf_load() {
swfobject.embedSWF("ExtIntDemo.swf", "flashMovie", "500", "250", "10.1", "swf/expressinstall.swf", flashvars, params, attributes);
};
- to be called when you want to load in the SWF, replacing a div with the id 'flashMovie'.
And:
<button onclick="flashMovie.recording_toggle()">Toggle recording</button>
to send the 'recording_toggle' function call into the SWF itself.

You can use ExternalInterface to communicate between JavaScript and AS3. After that it's just a case of making the button call the AS3 functions to you want to perform.

Background Audio in Windows 8 App

I'm trying to get audio to work outside the app (I'm using the HTML5, Javascript approach) in Windows 8, so when you close the app the sound continues to work, from what I have researched on here and on other sites and I believe this is called in Windows 8 'background audio, I've followed all the tutorials on Microsoft Developer site, and have declared background audio in the app manifest as so:
<Extension Category="windows.backgroundTasks" StartPage="default.html">
<BackgroundTasks>
<Task Type="audio" />
<Task Type="controlChannel" />
</BackgroundTasks>
</Extension>
and where I have added the msAudioCategory="BackgroundCapableMedia" controls="controls" to my HTML5 audio tag as so:
<audio id="playback" msAudioCategory="BackgroundCapableMedia" controls="controls">
</audio>
and I've also added this to my default.js file which was apprently needed, although I'm not sure what this does
// Declare a variable that you will use as an instance of an object
var mediaControls;
// Assign the button object to mediaControls
mediaControls = Windows.Media.MediaControl;
// Add an event listener for the Play, Pause Play/Pause toggle button
mediaControls.addEventListener("playpausetogglepressed", playpausetoggle, false);
mediaControls.addEventListener("playpressed", playbutton, false);
mediaControls.addEventListener("pausepressed", pausebutton, false);
// The event handler for the play/pause button
function playpausetoggle() {
if (mediaControls.isPlaying === true) {
document.getElementById("playback").pause();
} else {
document.getElementById("playback").play();
}
}
// The event handler for the pause button
function pausebutton() {
document.getElementById("playback").pause();
}
// The event handler for the play button
function playbutton() {
document.getElementById("playback").play();
}
I have also tried changing the ID in the last part to have a hash tag as well but still when I press the start button to go back home the audio stops, am I doing something wrong?
Thanks

I believe you also need to handle the "stoppressed" event:
mediaControls.addEventListener("stoppressed", stop, false);
function stop() {
// Handle the stop event.
document.getElementById("playback").pause();
document.getElementById("playback").currentTime = 0;
}
The three steps for playing background audio in Windows 8 JavaScript apps are:
Decalare an audio background task in package.appxmanifest. Also list a StartPage. You did this correctly.
Set msAudioCategory="BackgroundCapableMedia". You did this.
Implement support for media controls. Media controls are buttons on remote controls or on certain keyboards that play, pause, or stop audio. See the Configure keys for media sample on MSDN for a working example. I was able to get the example to work when only handling "stoppressed" in addition to the 3 events you were already handling.
For more information, watch Your Metro style app, video and audio, part 2 from the 2011 Build conference. Background audio is covered beginning at around 31 minutes, 20 seconds into the video and lasts for about 10 minutes. Note that this video is from September, 2011, and covers the Developer Preview of Windows 8. The concepts still apply to the released versions of Windows 8 and Windows RT, but namespaces and attribute names are different in some places.