This is my code this audio format does not work in mobile please help me how to work audio in mobile browser
<html>
<body>
<audio autoplay loop id="myVideo" width="320" height="176">
<source src="wedding.ogg" type="audio/ogg">
<source src="wedding.mp3" type="audio/mp3">
</audio>
</body>
</html>
<audio id="blast" src="blast.mp3"></audio>
<audio id="smash" src="smash.mp3"></audio>
<audio id="pow" src="pow.mp3"></audio>
<audio id="bang" src="bang.mp3"></audio>
<!-- Background Track -->
<audio id="smooth-jazz" src="smooth-jazz.mp3" autoplay></audio>
Then say you have a gun trigger with a class of blasterTrigger:
Shoot!
You could then use the Javascript API to control the playing of the blast sound when the trigger is clicked like so:
var blasterTrigger = document.querySelector(".blasterTrigger");
blasterTrigger.addEventListener("click", function(){
document.getElementById("blast").play();
});
Source of above code
OR
You can use some HTML5 Audio / Video Library:-
jplayer
mediaelementjs etc.
Related
I need to play a video (webm) and an audio (m4a) file at the same time on a browser that only accepts one media playing at a time (if I try to play them simultaneously on separate <video> and <audio> elements, the previous gets paused automatically).
Does anyone know what can I do?
Control the play of two media using JavaScript.
Try this:
function Players() {
var audio_player = document.getElementById('audio');
var video_player = document.getElementById('video');
audio_player.play();
video_player.play();
}
<button onClick="Players()">PLAY</button>
<br>
<br>
<audio id="audio" controls="controls">
<source src="audio.wav" type="audio/wav">
</audio>
<br>
<video id="video" width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>
while I am trying to autoplay a song in chrome but it is not working. I tried using JavaScript still getting the same error.
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
myFunction();
<audio id="myAudio" controls autoplay>
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div id="demo"></div>
In most browsers you can only use autoplay with the muted attribute
See: https://www.w3schools.com/tags/att_audio_autoplay.asp
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
So something like this should work:
<audio id="myAudio" controls autoplay muted>
<source src="horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
It is not allowed to autoplay sounds. So it has to be muted. Also with video you have to mute it, otherwise the video is not played. So it will be with audio also. Maybe you have to add a button that says that they have to click it to hear the sound?
I would like to interact with the vertical ellipses in an HTML DOM Audio Object. Here is an example audio object: (credit: w3schools, original HTML taken from https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_controller)
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
I've had success with implementing the pause/play controls, returning the duration of the song and getting the SRC. Here I create a button that executes myFunction() to click the play button:
<!DOCTYPE html>
<html>
<body>
<audio id="myAudio" controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myAudio");
x.play();
}
</script>
</body>
</html>
What I would like to do is to click on the vertical ellipses
then click again to download the song.
My question is: what is the JavaScript code to click on the vertical ellipses in the audio object?
You can't. In fact, the UI of the player is not necessarily standard. It can vary from platform to platform.
You can use .src to get the src attribute of the media element and download it yourself via the Fetch API or similar.
Reference http://america.wtf/Shadex
The site has audio that auto plays. However there is a videos page. I want to have it so that when you play the videos it auto pauses the music
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<audio id="sitemusic" controls autoplay>
<source src="media/turbo_grid.ogg" type="audio/ogg">
<source src="media/turbo_grid.mp3" type="audio/mpeg">
Your browser does not support the audio element.
<script>
var video = document.currentScript.parentElement;
video.volume = 0.1;
</script>
</audio>
see below for updated sample which will:
Pause the audio when you play the video
Play the audio when you pause the video
note the I removed the onClick from the video element, and also added an explicit id to the <video> element to make directly referencing it easier
<div id="videos" style="z-index:1"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls id="video">
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<audio id="sitemusic" controls autoplay>
<source src="media/turbo_grid.ogg" type="audio/ogg">
<source src="media/turbo_grid.mp3" type="audio/mpeg">
Your browser does not support the audio element.
<script>
var audio = document.currentScript.parentElement;
audio.volume = 0.1;
var video = document.getElementById("video");
// this event listener reacts to "play" happening on video element and enacts pause on the audio element
video.addEventListener('play', function (){document.getElementById("sitemusic").pause()},false);
// this event listener reacts to "pause" happening on video element and enacts play on the audio element
video.addEventListener('pause', function (){document.getElementById("sitemusic").play()},false);
</script>
</audio>
How can I hide HTML5 audio's browser specific controls? I'm making thumbnail images to represent each track and JavaScript to play/pause.
Thanks!
HTML:
<audio class="thumbnail" id="paparazzi" controls="none">
<source src="song.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
The controls attribute is a boolean attribute. This means that if it's specified, controls is true and if it's not specified, controls is false.
As far as validity goes, if you want controls to be true, you can specify it these ways:
<audio controls>
<audio controls="controls">
<audio controls="">
Don't specify the controls attribute at all, this should stop it from showing (I got this after a 5 second google, don't quote me on it).
HTML5 video - show/hide controls programmatically
var audio = document.getElementById('audioFile');
audio.controls = false;
<audio id="audioFile" width="100%" height="auto" controls>
<source src="xyz.mp3" type="audio/mpeg">
</audio>