I am using the download attribute to trigger a forced download of a song, but it seems to be overriding the onClick event. I can only do one or the other.
<output></output>
<input onclick="window.close()" type="button" value="Cancel"/>
<script>
var a = document.createElement("a");
a.download = song + ".mp3"
a.href = url
a.onclick = function(e) {
var notification = webkitNotifications.createHTMLNotification(
'notification2.html'
);
notification.show();
window.close();
}
document.getElementsByTagName("output")[0].appendChild(a);
document.getElementsByTagName("a")[0].innerHTML = "Download"
</script>
How do I both trigger the download, and fire the onClick event?
Try using addEventListener:
a.addEventListener("click", function (e) {
var notification = webkitNotifications.createHTMLNotification(
'notification2.html'
);
});
Related
On a desktop, media generally begins loading immediately, so you can wait until the "canplaythrough" event is fired before showing the controls, if you want to.
var button = document.getElementById('play_button');
button.innerHTML = 'Loading...';
var audio = new Audio('mySound.mp4');
audio.addEventListener('canplaythrough', ()=>{
button.innerHTML = 'Click to Play';
button.addEventListener('click', audio.play());
});
On mobile, at least on my iPhone, nothing is automatically loaded, therefore the canplaythrough event is never fired and my controls are never shown.
How can I ensure my media is pre-loaded into memory before showing controls for a seamless UX?
My solution was to load the media into memory with by converting it to a DataURL.
var button = document.getElementById('play_button');
button.innerHTML = 'Loading...';
fetch(src).then(r=>r.blob()).then(blob=>{
var reader = new FileReader();
reader.addEventListener("load", ()=>{
var audio = new Audio('mySound.mp4');
button.innerHTML = 'Click to Play';
button.addEventListener('click', audio.play());
});
reader.readAsDataURL(blob);
});
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()
});
});
I am able to change the parent window from iframe by clicking a link, but as soon as I click on the link, the iframe is also gone. Is there any way to change the path of parent window from iframe in background without closing the iframe?
var iframe = document.createElement('iframe');
iframe.onload = function(){
var link=document.createElement("a");
link.appendChild(document.createTextNode("Link"));
link.href = '#';
document.body.appendChild(link);
var s = document.createElement("script");
s.innerHTML = "window.addEventListener('click', function(event) {" +
"window.postMessage('testMsg', '*');" +
"}, false);";
document.head.appendChild(s);
}
iframe.src = 'http://example.org';
document.body.appendChild(iframe);
window.addEventListener('message', function(event) {
window.location.href = "http://jsfiddle.net";}, false );
window.top.location.href = "http://www.example.com";
Try out This one, Man...!!
I have this function that creates an image:
<script>
domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'invoice.jpeg';
link.href = dataUrl;
link.click();
});
</script>
The problem is that it launches immediately when loading the page. I want to do a button like:
<a class="btn" href="" onclick="printFunction()">Click here to print</a>
I tried wrapping the domtoimage inside function printFunction but that didn't work. What am I doing wrong? :(
If you are using jQuery, then you can wrap your function in the document.ready function, like this, if not your domtoimage.toJpeg function will be executed when browser parse that tag.
<script>
$(document).ready(function(){
var btnHandler = function(){
domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'invoice.jpeg';
link.href = dataUrl;
link.click();
};
var $btn = $("a.btn").click(btnHandler);
});
</script>
$('#buttonid').click (function (){
Your code here
});
You are triggering click event in promise callback.
A work around is to comment link.click() in promise callback and trigger the click event inside another function
To do so
comment link.click()
<script>
var link=null;
domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })
.then(function (dataUrl) {
link = document.createElement('a');
link.download = 'invoice.jpeg';
link.href = dataUrl;
// Comment the below line
// link.click();
});
</script>
Trigger the click event in custom function like below:
<a class="btn" href="" onclick="printFunction()">Click here to print</a>
<script>
function printFunction(){
// trigger the click event in printFunction
link.click();
}
</script>
in the function write this:
var srciptElement = document.createElement('script');
scriptElement.attr("src",the url of the jquery");
document.getElementsByTagName("BODY")[0].appendChild(scriptElement);
How can I change a AudioFile on a button click?
First Audiofile should start onLoad and when clicked change to second file. Player shoulden't be Visible.
If possible please answer in JavaSript!
Actually it's so simple :)
Just call a javascript function on a onClick event of a button.
//demo.html
<script>
var url = "mymusic.mp3";
function changeURL(){
document.getElementByIde('audio1').src = url;
}
</script>
<audio id="audio1" autoplay src="my.mp3"></audio>
<button onclick="changeURL()">Change Audio</button>
In the example, the function changeURL() will be call when we click on Change Audio Button.
Try this:
var url = "http://hydra-media.cursecdn.com/dota2.gamepedia.com/e/e5/Invo_laugh_07.mp3";
document.getElementsByTagName('button')[0].onclick = function() {
document.getElementsByTagName('audio')[0].src = url;
};
<audio autoplay src="http://hydra-media.cursecdn.com/robocraft.gamepedia.com/c/c6/BattleLoop.mp3"></audio>
<button>button</button>