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>
Related
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?
Hello I have a series of audio clips.
<div class="audio-wrapper">
<audio controls>
<source src="aduio1.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio2.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio3.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio4.mp3" type="audio/mpeg">
</audio>
</div>
In my actual code the audio is spread out through a large wordpress page.
I was wondering if it was possible to play the next one after one above it finishes? For example if one near the top of html is played then it will find the next down and play that, and so one.
For example if someone pressed play on the first one and it finished till the end. The one below it would start playing, and so on.
Another example if someone hit play on the 3rd one and that one finished, Then the 4th one would start playing.
Thanks for any help!
(think podcast site)
You can attach ended event to ".audio-wrapper audio" selector, check if $(this).parent(".audio-wrapper").next(".audio-wrapper") exists using .is(), if true, call .play()
const src = "https://upload.wikimedia.org/wikipedia/commons/4/4d/%22Pollinate%22-_Logic_Synth_and_Effects_Demonstration.ogg";
$(".audio-wrapper audio")
.each(function() {
this.src = src;
})
.on("ended", function(event) {
let next = $(this).parent(".audio-wrapper")
.next(".audio-wrapper").find("audio");
console.log(next)
if (next.is("*")) {
next[0].play()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
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>
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.
Something really akward is happening in my code, the autoplay for audio is not working.
Basically, every website code that i put this code the music autoplays but in this one is not working.
Find the footer code:
<footer>
<ul>
<h1>
<img src="images/topoPirelli.png" alt="">
</h1>
</ul>
<audio class="audio" loop autoplay="autoplay" controls>
<source src="1.ogg" type="audio/ogg">
<source src="1.mp3" type="audio/mpeg">
</audio>
</footer>
</div>
</body>
</html>
I had the same problem.
I solved it by using jquery in the end:
$('audio').on('canplay', function() {
this.play();
});
Edit:
Nowadays I noticed a lot of browsers don't allow autoplay to work if the video sound. So a solution could be adding the muted attribute.
<video autoplay muted>
Try this:
<audio class="audio" controls autoplay>
<source src="./1.ogg" type="audio/ogg">
<source src="./1.mp3" type="audio/mpeg">
<!-- <embed height="50" width="100" src="./1.mp3"> NOT NECESSARY -->
</audio>