We Keep Coding

How to run a function when a html5 video starts playing

i am building an app with ionic, i want to run a function whenever a video starts to play,like hide a button and etc. here's my code
let video = <HTMLVideoElement> document.getElementById(i)
if(video.paused) {
video.play()
video.oncanplay=()=>console.log('Starts playing');
}
The code is not working, please how can i run a function whenever any video on that page starts playing

var vid = document.getElementById("myVideo");
vid.onplay = function() {
alert("The video has started to play");
};
From here: https://www.w3schools.com/tags/av_event_play.asp

Try this, play returns a promise.
const video = document.getElementById("myVideo");
async function playVideo() {
try {
await video.play();
// video is playing, do your stuff here
} catch(err) {
// video is not playing
}
}
if(video.paused) {
playVideo()
}
For more info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play

Request permission to automatically play an audio file

I have a function in js that checks a variable date, and if it is present it starts an audio file.
Since with the new privacy it is not possible to start an audio file automatically, in fact in my case it is blocked.
I would like to have the broswer box appear to give consent to the reproduction of the audio file.
But, I do not know how can I do it.
Can you help me?
var audio = new Audio('/sound/file-one.mp3');
setInterval(function() {
$.ajax({
url: '/check_data.php',
type: 'post',
data: {
'check_data' : 1
},
success: function(response){
if (response != "false") {
audio.addEventListener('ended', function () {
audio.play();
}, false);
audio.play();
}
}
});
}, 5000);

User must start Audio, after Audio is started by a user action, you can change source whenever you want.
const audio = document.getElementById("au");
let bt = document.getElementById("bt");
console.log(audio);
bt.addEventListener("click", ()=>{
audio.play();
});
const startPlaying = ()=>{
audio.removeEventListener('playing', startPlaying);
bt.classList.add("hide");
audio.src = 'https://freesound.org/data/previews/475/475736_4397472-lq.mp3';
audio.play();
}
audio.addEventListener('playing', startPlaying);
audio.addEventListener('error', ()=>{
console.log("error");
});
.hide{
display:none;
}
<input id="bt" type="button" value="Accept">
<audio id="au" preload="auto" src="https://raw.githubusercontent.com/anars/blank-audio/master/500-milliseconds-of-silence.mp3"></audio>

How to trigger an unpause using audio controls in JavaScript?

Controlling the audio using the following code isn't working. If i click button which onclick calls playpause() it pauses the audio. But on again clicking it isn't resuming.
var audio=new Audio("music.mp3");
function music() {
audio.play();
audio.loop="true";
}
function playpause() {
if(audio.play)
{
audio.pause();
}
else if(audio.pause)
{
audio.play();
}
}
However if i use following, It is enabling pause and play using the same button
var audio=new Audio("music.mp3");
function music() {
audio.play();
audio.loop="true";
}
var count=0;
function playpause() {
if(count%2==0)
{
audio.pause();
}
else
{
audio.play();
}
count++;
}
What's wrong with the 1st one?

The HTML5 audio tag doesn't provide a 'play' property like you are trying to use in your code but it does provide a 'paused' property which by calling it returns the opposite Boolean. You would need to use it to query the state of the audio element.
Like this:
If(audio.paused) {
audio.play();
}
else {
audio.pause();
}

html audio - manually stop audio, raising ended event

Can I stop an html audio manually in a way that it raises the "ended" event?
<script>
var audio = new Audio();
audio.src = "https://translate.google.com/translate_tts?&q=text&tl=en&client=a"
audio.play();
audio.addEventListener("ended", function() {
console.log("audio ended");
});
audio.addEventListener("play", function() {
window.setTimeout(function() {
audio.pause(); //stop audio half sec after it starts - this doesn't raise the "ended" event!
}, 500);
});
</script>

You can do that but its on timeupdate event folowing code with jQuery and JS respectively
<audio ontimeupdate="watchTime4Audio(this.currentTime,this.duration)" ... ></audio>
IN HTML
//jQuery
$('audio').on('timeupdate',function(){
if($(this).prop('currentTime')>=$(this).prop('duration')){
//the song has ended you can put your trigger here
}
});
//JS
audio.addEventListener('timeupdate', function() {
if(this.currentTime >= this.duration){
//the song has ended you can put your trigger here
}
});
Using Javascript/JQuery

Play and Pause with onclick on the same Img

The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">

You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}

Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});