Refresh the page after sound is done playing in Javascript/jQuery - javascript

Stumped, I want to have a paper crumple sound play when I click the button to clear to localstorage data, but have to refresh the page after the localstorage data is cleared to update the changes, and the refresh is not allowing the sound effect to play. So I want it to wait till the sound effect finishes and then trigger the refresh. Thanks!
My HTML:
<audio controls="controls">
<source src="paper_crumple.mp3" type="audio/mpeg" />
</audio>
<section class="note">
<h3 id="clear">Clear Note</h3>
<h1 id="title" contenteditable="true">Note Title</h1>
<h2 id="date" contenteditable="true">Date Written</h2>
<p id="note" contenteditable="true">Hello! Click on the note card and start editing!
<br>
<br>
Try refreshing the page, notice that your content stays.
<br>
Try closing your browser, shutting your computer off, and then opening it up again.
<br>It still stays! This is all thanks to the html5 localstorage api.
<br>
<br>
Note that the data will not sync between different browsers, computers, or any other devices such as your mobile phone.
<br>
<br>
This note is responsive! Try adjusting your window size and see how the width adjusts.
<br>
Also note that when you get to mobile width, the note adjusts to best take use of the limited space.
<br>
<br>
Tips: You can press ctrl+b for <b>bold</b> text. Similarly you can do the same thing but for <u>underlined</u> or <i>italic text</i>.</p>
</section>
And my JavaScript:
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var title = document.getElementById('title');
$(title).blur(function() {
localStorage.setItem('title', this.innerHTML);
});
// when the page loads
if ( localStorage.getItem('title') ) {
title.innerHTML = localStorage.getItem('title');
}
// to reset
// localStorage.clear();
});
$(function() {
var date = document.getElementById('date');
$(date).blur(function() {
localStorage.setItem('date', this.innerHTML);
});
// when the page loads
if ( localStorage.getItem('date') ) {
date.innerHTML = localStorage.getItem('date');
}
// to reset
// localStorage.clear();
});
$(function() {
var note = document.getElementById('note');
$(note).blur(function() {
localStorage.setItem('note', this.innerHTML);
});
// when the page loads
if ( localStorage.getItem('note') ) {
note.innerHTML = localStorage.getItem('note');
}
// to reset
// localStorage.clear();
});
window.onload = function() {
var clear = document.getElementById("clear");
var myaudio = new Audio('paper_crumple.mp3');
clear.onclick = function() {
myaudio.play()
localStorage.clear()
// window.location.reload()
}
}
</script>

Try using ended event http://dev.w3.org/html5/spec/single-page.html#event-media-ended
clear.onclick = function() {
myaudio.play()
localStorage.clear()
myaudio.onended = function () {
window.location.reload()
}
}
This is basically saying - "After finished playing sound - reload page"

For anyone wanting an answer to this problem, I finally got it to work so I figured I'd share my solution with the community.
Just gave the link an ID and made the content of the href equal to: javascript:void(0);
Clear Note
Then I just put this into file script.js file:
window.onload = function() {
var clear = document.getElementById("clear");
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'paper_crumple.mp3');
audioElement.setAttribute('preload', 'auto');
audioElement.setAttribute('onended', 'window.location.reload()');
function playAudio() {
audioElement.load;
audioElement.play();
};
clear.onclick = function() {
localStorage.clear();
playAudio();
$("#wrapper").addClass("fadeOutDown");
};
};
Hope this helps anyone!

Related

Soundcloud API: Playing correct sound

Context: This is a Soundcloud API javascript and iframe that plays the sound of the soundcloud link when you hover over the link. The link is inputted into a table just so you know.
Problem: The problem is that when I hover over a link that I input into the table i.e say I put multiple links (each connected to a different sound) in the table but when I hover over each link they only play the sound of the first link in the table; The other links in the table does not play their appropriate sounds. Can someone help me modify the code below to fix this issue? Provide the modified code integrated with the original code below.
HTML (Iframe the src is customized to play that particular link):
<div class="clickme">
<iframe id="sc-widget" width="300" height="200" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https://soundcloud.com{{-list2[1]-}}&show_artwork=true"
frameborder="0" style="display: none">
</iframe>
</div>
Javascript(Soundcloud API):
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function () {
widget.bind(SC.Widget.Events.PLAY, function () {
// get information about currently playing sound
console.log('sound is beginning to play');
});
// get current level of volume
widget.getVolume(function (volume) {
console.log('current volume value is ' + volume);
});
// set new volume level
widget.setVolume(50);
// get the value of the current position
widget.bind(SC.Widget.Events.FINISH, function () {
// get information about currently playing sound
console.log('replaying sound');
widget.seekTo(0);
widget.play();
});
});
// Shorthand for $( document ).ready()
// A $( document ).ready() block.
$(document).ready(function () {
console.log("ready!");
var menu = document.getElementsByClassName("clickme");
for (i = 0; i < menu.length; i++) {
var list = menu[i];
var link = String(list.outerHTML)
if (link.includes('soundcloud')) {
list.addEventListener("mouseenter", function (event) {
console.log('start soundcloud');
widget.play();
});
list.addEventListener("mouseleave", function (event) {
console.log('pause soundcloud ');
widget.pause();
});
}
}
});
}());
</script>
The problem is that you're hard-coding the soundcloud player to the first iframe with an id of sc-widget by the following lines:
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
To be able to play a different track on hovering, the widget needs to be populated with the proper iframe.
So these are the steps needed. If a user hovers over one of the container divs
Check if the user already hovered this specific item.
In case he did, resume the sound.
In case he didn't unbind any events from the widget if there are any, initialize the widget with the iframe, bind the required events and start playback from the beginning.
If the user leaves a container div with the mouse, stop playback if there is something playing at all.
Here's a working example:
let widget;
let currentWidget;
$(document).ready(function() {
console.log("ready!");
var menu = document.getElementsByClassName("clickme");
for (i = 0; i < menu.length; i++) {
var list = menu[i];
var link = String(list.outerHTML);
if (link.includes('soundcloud')) {
list.addEventListener("mouseenter", function(event) {
if (event.currentTarget.childNodes[1] == currentWidget) {
widget.play();
} else {
if (widget) {
widget.unbind(SC.Widget.Events.PLAY);
widget.unbind(SC.Widget.Events.READY);
widget.unbind(SC.Widget.Events.FINISH);
}
widget = SC.Widget(event.currentTarget.childNodes[1]);
widget.bind(SC.Widget.Events.READY, function() {
widget.bind(SC.Widget.Events.PLAY, function() {
// get information about currently playing sound
console.log('sound is beginning to play');
});
// get current level of volume
widget.getVolume(function(volume) {
console.log('current volume value is ' + volume);
});
// set new volume level
widget.setVolume(50);
// get the value of the current position
widget.bind(SC.Widget.Events.FINISH, function() {
// get information about currently playing sound
console.log('replaying sound');
widget.seekTo(0);
widget.play();
});
});
widget.play();
}
currentWidget = event.currentTarget.childNodes[1];
});
list.addEventListener("mouseleave", function(event) {
console.log('pause soundcloud ');
if (widget) {
widget.pause();
}
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<div class="clickme" style="width: fit-content;height: fit-content;">
<iframe width="300" height="200" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/crythemindlesselectron/legend-of-zelda-ocarina-of-time-thunderstruck-oc-remix&show_artwork=true" frameborder="0">
</iframe>
</div>
<div class="clickme" style="width: fit-content;height: fit-content;">
<iframe width="300" height="200" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/daniel-feldkamp-2/sets/oc-remix-zelda&show_artwork=true" frameborder="0">
</iframe>
</div>

My audio does not play when I click on the play button

This is how my script looks like:
<script>
var obj = document.createElement("audio");
document.body.appendChild(obj);
obj.src = "http://example.com/audios/Kalimba.mp3";
obj.load();
obj.volume = 0.3;
obj.preLoad = true;
obj.controls = true;
$(".testspeech").click(function() {
obj.paused?obj.play():obj.pause()
});
</script>
Then in the HTML I have a button that is meant to play and/or pause the video.
However, when I load the page nothing happens when I click on the play button.
Anything I could have possibly done wrong here?
Here is the HTML:
<button class="testspeech">
play/pause
</button>
As far as I can tell the reason your sound isn't playing is that the src for the actual sound is not valid. I've created a JSFiddle (here) to test it out, and after replacing the sound clip link it works as expected.
$(document).ready(function() {
var obj = document.createElement("audio");
document.body.appendChild(obj);
obj.src = "https://www.kozco.com/tech/piano2.wav";
obj.load();
obj.volume = 0.3;
obj.preLoad = true;
obj.controls = true;
$(".testspeech").on('click', function() {
obj.paused ? obj.play() : obj.pause()
});
});

JavaScript play sound when user/tab/browser is inactive

I am using the following code to play sound when user receives a message AND the user is not in the tab mean that the current tab is INACTIVE or user is outside current tab.
$(window).hover(function(event) {
if (event.fromElement) {
console.log("inactive");
} else {
console.log("active");
beep("beep.wav", 1.0); //your code here
}
});
I want to play the sound only when user is away from tab and NOT when he is inside the tab. Right now the sound only plays when the user comes back to the tab. This is not what i want.
I can see facebook and gmail does this even if user is outside in another tab, How do they do it?
I searched on SO but couldn't find any answer for this!
Help me!
I imagine something like:
var intervalHandler = null;
$(window).blur(function(e) {
intervalHandler = window.setInterval(function() {
document.getElementById('beep').play();
window.clearInterval(intervalHandler);
}, 1000);
});
$(window).focus(function(e) {
window.clearInterval(intervalHandler);
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<audio id="beep" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>
Found from SO myself:
They disable the sound when user tab is active:
var isactive = false;
function playSound(){
if (isactive) return;
playWav...;
}
onNotificaitonComes = playSound;
$(window).focus(function(){
isactive = true;
}).blur(function(){
isactive = false;
});

audio.play() html tag doesn't play in chrome

I am facing an issue while playing audio in chrome when audio.src is not called preceeding to play call. However, firefox plays it alright. Can someone pls suggest? Below is the fiddle link -
http://jsfiddle.net/vn215r2d/1/
One can also find the code over here -
<html>
<head>
<script language="javascript">
var audioo = document.createElement("audio");
function newCall() {
audioo.src = "";
audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";
audioo.play();
}
function playAgain() {
audioo.play(); // doesn't work in chrome :(
}
</script>
</head>
<body>
<button type="button" onClick="newCall()">New Captcha Call</button>
<br>
<button type="button" onClick="playAgain()">Replay Captcha</button>
</body>
</html>
Update
Oh waw, apparently is comes down to the audio.currentTime not being writeable until you rewrite the src. Heres what you can do and it does work:
function newCall() {
audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";
// make all audio attributes writeable again by resetting the src
audioo.src = audio.src;
}
The answer took a bit of googling, but I got it from here: https://stackoverflow.com/a/14850353
Original
I tested on Chrome with resetting the audio position and it worked. Its safest to pause first, but it works either way.
var audioo = document.createElement("audio");
// Lets add an event listener to play when we are ready to start playing
audioo.addEventListener("canplaythrough", function(){
audioo.play();
}, false);
function newCall() {
audioo.src = "";
audioo.src = "http://xx.xx.xx.xx:8181/api/captcha/sound";
}
function playAgain() {
// Let's check if we are ready enough to play
if(audioo.readyState === 4){
audioo.pause(); // first pause
audioo.currentTime = 0; // then reset
audioo.play(); // then play
} else {
// else inform us that we are not ready to play yet.
alert("Audio not ready yet.");
}
}
Here are two fun resources that can help:
MDN:
MediaElement (usefull properties and functions)
MDN:
Media Events (for event listeners)

HTML button tag stuck and won't play HTML5 audio on second click

I have a playlist page, which works out fine on the computers. Unfortunately on android, when I click the start button, then the stop button, it's stays orange and does not change the track!
I'm assuming the button tag on android is waiting for something back?
Also, the src updating is not working on android.
Here is my javascript:
function Stop ()
{
var audie = document.getElementById("myAudio");
audie.pause();
}
function Start ()
{
var audie = document.getElementById("myAudio");
audie.src = ("new link");
audie.play();
}
and here is the HTML:
<audio id="myAudio" onended="Start()"></audio>
<button type="button" onclick="Start()">Start</button>
<button type="button" onclick="Stop()">Stop</button>
Try this instead:
var audie = document.getElementById("myAudio");
function Stop ()
{
audie.muted = true;
}
function Start ()
{
audie.src = ("new link");
audie.muted = false;
audie.currentTime = 0;
}
I think audio.pause stops the download of a song. Please correct me if I am wrong.

Categories