I am working on a project that requires a sound to play when a link is clicked. Everything works fine, I used the Javascript below. The problem is that it takes about 30 seconds (depending on internet speed) before you actually hear the file because the browser has to download it. Is there a way to adapt the code below to display an indicator that the file is loading?
<bgsound id="sound">
<script>
function PlaySound(url) {
document.all.sound.src = url;
}
</script>
and this on as the link:
Play
A forewarning that "bgsound" is proprietary to Internet Explorer, as far as I know. Having said that, you can subscribe to its "readystatechage" event to find out when it's done loading.... (untested! as I don't have IE)
<div id="soundLoading" style="display: none;"><img src="someani.gif" /></div>
<bgsound id="sound">
<script>
function PlaySound(url) {
// Setup some loading animation here......
document.all.soundLoading.style.display = "inline";
// Add event listener and set the sound source
sound.onreadystatechange = CheckSoundLoaded;
document.all.sound.src = url;
}
function CheckSoundLoaded() {
if(document.all.sound.readyState == 4) {
// sound is loaded, remove loading animation
document.all.soundLoading.style.display = "none";
}
}
</script>
http://www.highdots.com/forums/javascript/finding-when-bgsound-downloads-47830.html
Simple
The simplest method is to replace the 'Play' text for the link with 'Loading...':
<script type="text/javascript">
//<![CDATA[
function PlaySound(url, anchor) {
anchor.innerHTML = 'Loading...';
document.all.sound.src = url;
}
//]]>
</script>
Play
Here is a demo JS Fiddle.
More Advanced
Another option is to replace the anchor's text with an animated gif:
<script type="text/javascript">
//<![CDATA[
function PlaySound(url, anchor) {
anchor.innerHTML = '<img src="http://www.fordesigner.com/pic/zip/200916124527437778027.gif"/> Loading...';
document.all.sound.src = url;
}
//]]>
</script>
Play
Here is an example JS Fiddle.
Related
I would like to implement an audio player on all of my WordPress pages and therefore I need to create the HTML element with JS and manipulate it from there. Everything is working, except for when I press the play button, it redirects me to a new page with the audio link and plays it there. I would like to prevent that, so that I can play and stop it on the WP pages themselves and have the audio play in the background.
Any tips are greatly appreciated!
function addAudioPlayer() {
const audioPlayer = document.createElement("a");
audioPlayer.setAttribute("id", "audioPlayer");
audioPlayer.href =
"https://www.hostname.com/wp-content/uploads/2020/09/bird_sound.wav";
audioPlayer.setAttribute("data-id", "[data-song]");
audioPlayer.innerHTML = "▶";
Array.prototype.forEach.call(
document.querySelectorAll("[data-song]"),
function (song) {
song.audio = new Audio(song.href);
song.setAttribute("role", "button");
song.setAttribute("aria-pressed", "false");
}
);
document.addEventListener("click", function (event) {
if (!event.target.hasAttribute("data-song")) return;
event.preventDefault();
if (event.target.getAttribute("aria-pressed") == "true") {
event.target.audio.pause();
event.target.setAttribute("aria-pressed", "false");
return;
}
event.target.audio.play();
event.target.setAttribute("aria-pressed", "true");
},
false
);
document.body.appendChild(audioPlayer);
}
<div>
<audio id="myaudio" src="https://www.hostname.com/wp-content/uploads/2020/09/bird_sound.wav" controls="controls" preload="auto" hidden="true"></audio>
<input type="button" onclick="autoPlay()" value="Play"/>
</div>
<script language="javascript" type="text/javascript">
var myAuto = document.getElementById('myaudio');
function autoPlay(){
myAuto.play();
}
</script>
I know this has been covered extensively as separate issues; I've tried copying verified answers, but I'm having trouble homologating Javascript conditional statements and a link URL change.
Essentially, what I need to do is detect mobile users and change a conference call URL to a tel link. I've been using if (screen.width <=699) { as the condition and it works on redirects. Here's what I've tried:
<script type="text/javascript">
<!--
var call=document.getElementByID('phone');
if (screen.width <= 699) {
call.write('<a href="tel:!PHONENUMBER!">');
else
call.write('<a href="!URL!" target="blank">);
}
//--!>
</script>
</head><body>
...
...
I've also tried these with corresponding else statements to no avail:
no var and document.getElementByID('phone').write
onclick = function() { window.location.href ='tel:!PHONENUMBER!};.
call.src.replace('tel:!PHONENUMBER!');
call.setAttribute("href",'tel:!PHONENUMBER!');
I apologize if this is a super basic issue - I'm still learning Javascript. Thank you in advance.
Will
You need to either wait for the page to finish loading before you execute your JavaScript or move your script block to the bottom of the HTML.
If you want to wait for the page to finish loading, then wrap your code in the following:
window.onload = function () {
// your code goes here
}
Figured it out with help from #sepbot.
<body onload="mobileURL()">
<div id="phone"></div>
<script type="text/javascript">
function mobileURL() {
var a = document.createElement("a");
a.innerHTML="!LINKTEXT!";
var myPhone = document.getElementById('phone');
if (screen.width <= 699) {
a.setAttribute('href', '!TELEPHONE!');
myPhone.appendChild(a);
} else {
a.setAttribute('href', '!URL!');
myPhone.appendChild(a);
}
}
</script>
I have following script in the <body>:
<script>
(function($) {
var buttonShowed = false;
var vPlayer = new Vimeo.Player($('#video0 iframe'));
vPlayer.on('timeupdate', function(time) {
if ((time.seconds >=580) && (!buttonShowed) ) {
buttonShowed = true;
$('#delayed-button') .css('visibility','visible');
}
});
})(jQuery);
</script>
In the <head>:
<script src="https://player.vimeo.com/api/player.js"></script>
The Vimeo Video got the ID video0 and the button got the ID delayed-button.
On my phone the button shows on 580 seconds but with different browsers (Chrome, Opera, Safari) on my PC the button does not show up.
I really don't why, can you help me?
Try using a div element instead of an iframe and it should work. It seems that timeupdate is not working with iframe.
I've made you a working fiddle here. The full code:
var buttonShowed = false;
var vPlayer = new Vimeo.Player($('#video0 #player'));
vPlayer.on('timeupdate', function(time) {
console.log(time.seconds);
if ((time.seconds >= 570) && (!buttonShowed)) {
buttonShowed = true;
$('#delayed-button').css('visibility', 'visible');
}
});
#delayed-button{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://player.vimeo.com/api/player.js'></script>
<div id='video0'>
<div data-vimeo-id="76979871" data-vimeo-autoplay="true" id="player"></div>
</div>
<div id='delayed-button'>
button
</div>
I cant seem to understand what I am doing wrong with this I am trying to add in a check box that will target the Iframe created by my predecessor but being a novice to JavaScript I have thus far used snippets of code from various sources to come up with this Frankenstein. I have started courses on java but I'm long off making these codes myself for now.
<b>STATUS TAG</b>
▲
▼
<!--Space--> ||
<!--Refresh page Box-->
<b>Auto Refresh 2Min</b>
<input type="checkbox" name="toggle" value="1" autocomplete="off">
<script>
if (iframeElement.contentWindow.location.hash == "custFrame") {
$("[name=toggle]").prop("checked", true);
pageRefresh = setTimeout(function() {
iframeElement.contentWindow.location.reload();
}, 120000);
}
$("[name=toggle]").click(function() {
if (!$('[name=toggle]').prop('checked')) {
(iframeElement.contentWindow.location.hash = ""
clearTimeout(pageRefresh);
} else {
(iframeElement.contentWindow.location.hash= "custFrame";
pageRefresh = setTimeout(function() {
iframeElement.contentWindow.location.reload()
}, 5000);
}
})
</script>
<!--Space--> ||</p>
<iframe id="custFrame" name="custFrame" src="google.com" marginheight="0" onload="javascript:autoResize(this);" frameborder="0" width="100%" height="80%"></iframe>
<script>
var socket = new easyXDM.Socket({ onReady:
function() { socket.postMessage(document.body.scrollHeight)
}
});
</script>
Inner URLs changed to google for testing
I should mention that I have various Quickbase API commands with the buttons on the top so it must target the frame and cannot revert back to the default url.
This code is completely working for me:
<script type="text/javascript">
// this will run when the document is fully loaded
function init() {
var input = document.querySelector('input[type=checkbox]');
input.onchange=check
function check(){
var start=setTimeout('reload()',3000)
StartStop=input.checked ? start : clearInterval(start)}
}
// this reloads the iframe, and triggers the next reload interval
function reload() {
var iframe = document.getElementById('reloader');
if (!iframe) return false;
iframe.src = iframe.src;
}
// load the init() function when the page is fully loaded
window.onload = init;
</script>
</head>
<body>
<input type="checkbox" id="JustChecked" >checked to get latest<br>
<iframe id="reloader" width="200" height="100" src="test1_frame.html"/>
I'm using YTPlayer in my iOS app. Everything's fine until the fullscreen button on the toolbar of the YTPlayer got disappeared, now I don't see the fullscreen button,
instead I have a video quality button, playlist button and play on youtube button which are not much useful for me, also which weren't there before. So how to get a fullscreen button on the toolbar and if possible how to remove unwanted buttons. Should I have to change anything in the html file?
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; width:100%%; height:100%%; }
html { width:100%%; height:100%%; }
</style>
</head>
<body>
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
YT.ready(function() {
player = new YT.Player('player', %#);
window.location.href = 'ytplayer://onYouTubeIframeAPIReady';
});
function onReady(event) {
window.location.href = 'ytplayer://onReady?data=' + event.data;
}
function onStateChange(event) {
window.location.href = 'ytplayer://onStateChange?data=' + event.data;
}
function onPlaybackQualityChange(event) {
window.location.href = 'ytplayer://onPlaybackQualityChange?data=' + event.data;
}
function onPlayerError(event) {
window.location.href = 'ytplayer://onError?data=' + event.data;
}
</script>
</body>
</html>
Thanks in advance.
Never mind. The fullscreen button is visible now. Have no idea why it disappeared and why it got back, think youtube modified it or something.