I have a simple website I am trying to build. I have a mp4 video (it is a sign no audio)
I want to click the video and have it play an mp3 w/ controls. Just cannot figure out how to do this.
Assume I could use something like this:
<audio controls id="linkAudio">
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
document.getElementById("link_id").addEventListener("click", function () {
document.getElementById("linkAudio").play();
});
</script>
But where do I reference the video src as the thing to click?
Thanks
You could have the <video> separate and on click event trigger the audio.
document.getElementById("link_id").addEventListener("click", function () {
document.getElementById("linkAudio").play();
});
video{
width: 200px;
display: block;
}
<video src='http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' id='link_id'></video>
<audio controls id="linkAudio">
<source src="http://www.noiseaddicts.com/samples_1w72b820/29.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Related
I want to autoplay audio in my website as soon as I open my site. But it doesn't work.
<audio id="myAudio" autoplay>
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/ogg">
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/mpeg">
</audio>
<script>
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
myFunction();
Should start playing the audio file when the page loads, thanks to the autoplay attribute on the <audio> element. The buttons in the HTML code allow you to control the audio playback by calling the play() and pause() methods on the <audio> element.
Note that some browsers may not allow audio to automatically play on a website due to user experience and security concerns. In these cases, the user may need to explicitly start the audio playback by clicking on a button or some other element on the page.
<audio id="myAudio" autoplay>
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/ogg">
<source src="./Welcome to Kitchen Nightmares..mp3" type="audio/mpeg">
</audio>
<p>
<button onclick="playAudio()">Play Audio</button>
<button onclick="pauseAudio()">Pause Audio</button>
</p>
<script>
function playAudio() {
var audio = document.getElementById("myAudio");
audio.play();
}
function pauseAudio() {
var audio = document.getElementById("myAudio");
audio.pause();
}
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
function PlayMusic() {
var play=document.getElementById("music");
play.play();
}
$(document).ready(function(){
setTimeout(PlayMusic,3000);
})
</script>
</head>
<body>
<audio controls id="music" >
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
</audio>
</body>
</html>
After page load audio will play (1 sec delay).
URL The URL of the audio file. Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/horse.ogg")
A relative URL - points to a
file within a web site (like src="horse.ogg")
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?
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>
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.
Here's my HTML:
<audio id="audio_core" autoplay="autoplay">
<source src="audio/bgm.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
and my JavaScript:
$(document).ready(function() {
$('#audio_core').prop('volume', 0.15);
}
I want to set the volume lower.
I guess you just need to properly close $(document).ready(function() with }), the rest of the code works fine.
$(document).ready(function() {
$('#audio_core').prop('volume', 0.15);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio_core" autoplay="autoplay" controls="controls">
<source src="http://www.maninblack.org/demos/PoliceLineDontCross.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
PS: remove controls="controls". Added only to avoid refreshing the page to stop the music.
Found it. I had to do this:
<audio id="audio_core" autoplay="autoplay">
<source src="audio/bgm.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
$(document).ready(function() {
$('#audio_core').prop('volume', 0.05);
})
</script>