can i use playaudio() before refreshing my site? - javascript

hello, i have a simple button
<a onclick="window.location.href=window.location.href" class="btn"> Stop </a>
and i have an audio source
<audio id="myAudio"> <source src="https://myweb.com/files/tuntun.mp3" type="audio/mpeg"> </audio>
and this is javascript
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
</script>
i want the audio play before refreshing the page when i click the button, i tried but my audio stops while refresh.
Bye the way i need it for ANDIOID Browser
I hope you can understand what I need because I'm bad at English

You will have to run a function on click... That will play the audio and then will refresh the page.
<a onclick="playAudio()" class="btn"> Stop </a>
<audio id="myAudio"> <source src="https://myweb.com/files/tuntun.mp3" type="audio/mpeg"> </audio>
<script>
let stopFlag = false
let x = document.getElementById("myAudio");
function playAudio() {
// Set a flag to know if the "stop" link was clicked
stopFlag = true
x.play();
}
// An event listener to reload the page after the video has ended if the "Stop" link was cliked
x.addEventListener('ended', () => {
if(stopFlag){
window.location.reload()
}
})
</script>

Related

Audio play on hover / mouse over, possible without jQuery ?

I just put together this code to play audio on hover.. on a test page, trying to incorporate it into the rest of the site, but the jQuery is clashing with other jQuery, and noconflict mode at this point is a pretty huge job. Is it possible to do the following using only javascript ?
<audio id="whiterose" preload="auto">
<source src="//sarahboulton.co.uk/audio/white-rose.mp3"></source>
<source src="//sarahboulton.co.uk/audio/white-rose.ogg"></source>
</audio>
<div class="whiterose">
white rose?
</div>
<script>
//change audio 1 to audio 2.. 3 .. etc
var audioOne = $("#whiterose")[0];
$(".whiterose a")
.mouseenter(function() {
audioOne.play();
});
</script>
http://sarahboulton.co.uk/audio.html#
Thanks !
<audio id="audio" preload="auto" src="http://sarahboulton.co.uk/audio/white-rose.mp3"></audio>
<div id="test" style="background-color:red;" class="whiterose">
white rose?
</div>
<script>
var test = document.getElementById("test");
test.addEventListener("mouseover", function( event ) {
var audio = document.getElementById("audio");
audio.play();
}, false);
</script>

How can i use this class on more than one button?

SCRIPT AND HTML CODE: When i click on a button, the other buttons are working. I've one class for buttons so how can i use multiple this button ?
Shall i add data_id for each button ?
Is this what you need?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls>
<source src="http://www.noiseaddicts.com/samples_1w72b820/4160.mp3" id="audio" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Try adding a new class to the tag. And get the element on your JQuery by the new class, like this:
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
$('.play-button').addClass('icon-control-pause')
$('.play-button').removeClass('icon-control-play')
}else{
audio.pause();
$('.play-button').addClass('icon-control-play')
$('.play-button').removeClass('icon-control-pause')
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio src="audio.mp3" id="audio"></audio>
<i class="play-button icon-control-play i-2x" id="play" onclick="play()"></i>

Multiple HTML5 Audio players. Stop other audio instances from playing when clicking play on another

I was hoping for some assistance with this. I have 3 audio instances on a single page. Handling the audio to play and pause isn't an issue. The issue is when audio is playing and I click play on another, I can't get the other audio instance to stop playing. So in the end I have these tracks all playing and I have to manual hit stop on each of them. My code below so far.
Honestly I am not sure how to go about doing the checks for this. First time doing something like this.
Any help would be appreciated :) thanks
HTML:
<div class="voting-artist">
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
<audio class="audio">
<source src="{{ song.url }}" type="audio/mpeg">
</audio>
</div>
jQuery/JavaScript:
$votingArtist.each(function(i, value) {
var $this = $(this);
var thisAudioPlayBtn = $this.find('.play-btn', $this);
var thisAudioStopBtn = $this.find('.stop-btn', $this);
var thisSelectionCont = $this.find('.selection--play-btn', $this);
var thisAudio = $this.find('.audio', $this);
thisAudioPlayBtn.on('click', function(e) {
thisAudio[0].play();
thisAudioPlayBtn.hide()
thisAudioStopBtn.show();
thisSelectionCont.addClass('is-playing');
});
thisAudioStopBtn.on('click', function() {
thisAudio[0].pause();
thisAudioPlayBtn.show()
thisAudioStopBtn.hide();
thisSelectionCont.removeClass('is-playing');
});
});
Just pause() them all!
thisAudioPlayBtn.on('click', function(e) {
$("audio").pause(); // Add this to pause them all.
$(".selection--play-btn").removeClass("is-playing"); // And remove the playing class everywhere too!
$(".play-btn").hide(); // Reset play/pause button
$(".stop-btn").show();
thisAudio[0].play();
thisAudioPlayBtn.hide()
thisAudioStopBtn.show();
thisSelectionCont.addClass('is-playing');
});

(Javascript) How can I make a mute button to mute my background music on click?

Right now on my site, (http://www.thehistoryofhiphop.net), I am trying to make my mute button functional. I want it to mute the background music that I have playing. How can I make it mute on click of the image?
Here's my html for the music:
<embed src="no_joke.mp3" loop="true" autostart="true" hidden="true" id="music"/>
embed tag has no muted attribute, so use audio tag.
and take this code:
<script>
function toggleSound() {
var elements = document.getElementsByTagName('audio');
for(var e = 0; e < elements.length; elements[e].muted = !elements[e].muted, e++);
}
</script>
<button onclick="toggleSound()">TOGGLE SOUND</button>
<audio
src="http://www.thehistoryofhiphop.net/no_joke.mp3"
preload="auto"
loop="true"
autoplay="true"
id="music">

play video before redirecting to another page

I want to use a video as a background that automatically stretches to the whole screen,in such a way that if a page is loaded then just before the loading of the content a video plays for 5 sec then it pauses and contents are loaded and again start playing if user clicks on another link,and the user will not be redirected before the video finishes.
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});
my code is working fine its just that I don't know how to play the video just before redirecting to another page without using an intermediate page
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
</head>
<body>
<video id="Video1" >
// Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogv" type="video/ogg" />
HTML5 Video is required for this example.
Download the video file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
Think you need something like this:
$( "a" ).click(function( event ) {
event.preventDefault();
var link = $(this).attr('href');
BV.play();
BV.addEvent("ended", endFunc);
function endFunc(link) {
window.location = link;
};
});
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" preload="auto">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>

Categories