I'm building a game to help kids to learn alphabets, the game is simple it will pronounce the letter and the user should choose the right letter between 3 different choices
the problem is that I can't autoplay the letter's audio file because of chrome autoplay policy which blocks autoplayed audio/video to avoid adds
one of the ways I found on google is inserting an audio/video tag on the HTML with fixed src, but that didn't work for me because audio's path would change with each new round
the other way is to set chrome flag autoplay to enable which affects my browser only but not the other users
is there a way on JS to avoid chrome's autoplay polices and make the audio file play automatically or I have to inject the audio's path into the audio tag with each new round?
<html lang='ar' dir="rtl">
<head>
<meta charset='UTF-8'>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='choose the right styles/style.css'>
<link rel='stylesheet' href='choose the right styles/queries.css'>
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght#400;700&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<nav class="choose-the-right">
<div class="score-container">
<span class="score score-line"> score: <span class="score score-value"></span></span>
</div>
</nav>
<main class="container">
<div class="items-menu-div container">
<div class="bird-image">
<img id="bird" src="../resources/images/undraw_happy_music_g6wc.svg" alt="a bird wearing a headphone hearing alphabets">
</div>
<ul class="items-menu">
<li class="alpha-item">A</a></li>
<li class="alpha-item">B</a></li>
<li class="alpha-item">C</a></li>
</ul>
</div>
</main>
<script src="choose the right scripts/choose-game.js"></script>
</body>
</html>
window.addEventListener("load", init())
// DOM VARIABLES
const letterChoices = document.querySelectorAll(".alpha-item");
const bird = document.querySelector("#bird");
const path = document.querySelector("#src-path");
// PRIMITIVES VARIABLES
// const alphabets = ["أ","ب","ت","ث","ج","ح","خ","د","ذ","ر","ز","س","ش","ص",
// "ض","ط","ظ","ع","غ","ف","ق","ك","ل","م","ن","ه","و","ي"];
const alphabets = ["A","B",'C','D','E','F','G','H','I','J','K','L','M',
'N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
function init(){
let randomNum = Math.floor(Math.random()*alphabets.length);
let audio = new Audio(`../../resources/AR-alphabets/${randomNum}.mp3`);
audio.play();
}
You just cant play sound in browser unless user has interacted with it. I would suggest to add a start button which user can click thus satisfying the chrome security condition and it will play sound.
Also you should set audio.autoplay property to true
Related
I am trying to grab the video element of a webpage and save the image locally.
In my code I have in my C# project:
this.webView.Source = new Uri( localhost:4000/watcher.html );
I'm running a local node server with javascript to display a video of a camera feed and in my watcher.html it looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Viewer</title>
<meta charset="UTF-8" />
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="controls">
<button id="button" onClick="changeCamera(0)">Camera One</button>
<button id="button2" onClick="changeCamera(1)">Camera Two</button>
</div>
<video playsinline autoplay muted></video>
<script src="/socket.io/socket.io.js"></script>
<script src="watch.js"></script>
</body>
</html>
My c# project loads the webpage fine, but How can I grab a picture of the video element and not get the entire screen? I created the following function below to take a picture of the entire screen just to test, it works, but I have no clue on how I can manipulate the webView2 to get my image. Any input on how to achieve this would be amazing. Thanks.
private void TakePicture(string fileName)
{
Bitmap screenGrab = new Bitmap( Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb );
Graphics g = Graphics.FromImage( screenGrab );
g.CopyFromScreen( Screen.PrimaryScreen.Bounds.Left, Screen.PrimaryScreen.Bounds.Top, 0, 0, screenGrab.Size, CopyPixelOperation.SourceCopy );
screenGrab.Save( fileName + ".jpg", ImageFormat.Jpeg );
}
P.S. I already explored trying to export the jpeg directly from my node server, I spent many many hours trying to get it to work and now I'm exploring other options.
so I have been having this problem for about a week or so now, and I think I have tried over 25 different ways to try and solve this, but I just can't seem to do it.
So my problem is this, I am starting a streaming website, and the files it uses to play on the website are around 1-2 gigabytes each (btw the videos are downloaded and loaded to the website locally). There is one video per page for each episode, but the thing is, the videos take about 10-15 minutes each to load and be playable.
I have tried to get video buffering working, video streaming working, and everything I could possibly think about to make these videos load faster, but I have always hit a dead end.
All the web browsers try to load the entire video all at once before it starts playing, and I'm trying to avoid this as it takes way to long to transfer and receive 1-2 gigabytes of data over the internet.
My thoughts are these:
Is there a way to slowly load the video as the person watches it?
Is there a way to load the video in fragments as the person watches it?
Here is the code for my webpage:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8^">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="with=device-width, inital-scale=1.0">
<title>Anime Alpha</title>
<link rel="stylesheet" href="../Episode Style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/920bf63c36.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="header">
<nav>
<img src="../../graphics/logos&icons/Anime Alpha.png">
<div class="nav-links" id="navLinks">
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>WATCH</li>
<li>DONATE</li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i>
</nav>
<div class="container">
<div class="row">
<div class="playVideo">
<div class="episodeInfo">
<p class="name">A Certain Scientific Railgun</p>
<p class="episode">Episode 08</p>
</div>
<video autoplay controls id="animeMedia">
<source src="../../AnimeAlphaMedia\A Certain Scientific Railgun\Season 1\E08.mp4" type="video/mp4">
</video>
</div>
<div class="bottomBar">
Episode 1
Episode 2
Episode 3
Episode 4
Episode 5
Episode 6
Episode 7
Episode 8
Episode 9
Episode 10
Episode 11
Episode 12
Episode 13
Episode 14
Episode 15
Episode 16
Episode 17
Episode 18
Episode 19
Episode 20
Episode 21
Episode 22
Episode 23
Episode 24
</div>
</div>
</div>
<div class="videoDescription">
<h3>Video Description:</h3>
</div>
</section>
<script>
var navLinks = document.getElementById("navLinks")
var video = document.getElementById("animeMedia")
video.buffered.start(0);
video.buffered.end(0);
function hideMenu(){
navLinks.style.right = "-200px";
}
function showMenu(){
navLinks.style.right = "0px";
}
</script>
</body>
</html>
I would very very deeply appreciate any help towards this problem, thank you.
Comment by #Offbeatmammal
You need to either look at a fragmented MPEG solution (HLS or DASH) or if you want to keep a single file then if using MP4 encode it with the MOOV atom at the start (eg stackoverflow.com/questions/53537770/…) and make sure your server supports Byte Range Requests (MOOV atom contains the metadata that the browser can leverage to improve loading/playback, ie your option 2).
I'm trying to learn the Web Audio API from the MDN tutorial but even the most basic example — no modular synthesis, just playing a simple mp3 file — doesn't seem to work on my end.
I can see the dataset value being switched in the console, the play/pause on the controls change state, and in Firefox and Safari (but not in Chrome) the track locator even advances and the "playing" icon displayed on the browser tab.
(I've added the controls attribute to the audio tag just to have a progress indicator visible).
I can also download the file from the DOM controls and play it using the OS, and I've tried it with three different MP3 files. The computer's speakers are obviously working.
BTW, creating audio with oscillators and the AudioContext object works fine.
I'm out of ideas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls src="song.mp3"></audio>
<button data-playing="false" role="switch" aria-checked="false">
<span>Play/Pause</span>
</button>
<script src="audio.js"></script>
</body>
</html>
JS
'use-strict'
const aCtx = new AudioContext();
const el = document.querySelector('audio');
const track = aCtx.createMediaElementSource(el);
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this);
if (aCtx.state === 'suspended') {
aCtx.resume();
}
if (this.dataset.playing === 'false') {
el.play();
this.dataset.playing = 'true';
} else {
el.pause();
this.dataset.playing = 'false';
}
}, false);
I have been trying to implement an accesibility function for a Website and one of my requirements is having a grayscale activated or deactivated on the click of 2 links. The users are still on Internet Explorer 11, so the compatibility with that navigator is a must.
So far, I have implemented some styles and code I found on the web and those are working great, I adapted the code, so I have 2 hyperlinks that execute a javascript function. One for enabling the grayscale and another one for disabling it.
But I have an issue, the grayscale is always turned on from the start whenever I load the page. I would like the grayscale starting disabled and then being enabled on by the click of one of my links.
Testing with Chrome and Firefox, the grayscales are turned off by default by adding the "grayscale-off" class to my images. Despite this, the issue persists on Internet Explorer.
So, I tried forcing the call to my javascript function that disables the grayscale on several parts:
Body
<body onload='enableEG(null)'>
Images themselves
<img src="img/FOV_8967.JPG" alt="Goal 1" width="600" height="400" class="grayscale grayscale-off" onload="enableEG(null)">
On the required script tag
<script src="js/jquery.gray.min.js" onload="enableEG(null)"></script>
Even tried creating a new script tag all the way to the bottom of my code, just before closing the body tag.
<script>enableEG(null);</script>
Interestingly, I put a couple of alerts that pop up when the function is executed, and they do appear when loading the page in IE with those forced function calls, however, the images still are grayscaled initially.
Here's my entire html code for reference (without the forced calls to the function):
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gray</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/gray.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script>
function enableEG(t){
var activeT = t;
//Internet Explorer
var isIE = /*#cc_on!#*/false || !!document.documentMode;
if (isIE) {
if ( activeT == null ){
alert ("activateEG1: NULL; disable");
$('.grayscale').toggleClass('grayscale-off',true);
}
else {
alert ("activateEG1: 1; enable");
$('.grayscale').toggleClass('grayscale-off',false);
}
}
//Other navigators
else {
if ( activeT == null ){
document.documentElement.style.webkitFilter = 'grayscale(0%)';
}
else {
document.documentElement.style.webkitFilter = 'grayscale(100%)';
}
}
}
</script>
</head>
<body>
<p>Grayscale Test</p>
<p><a id="linkEnable" href="#" onclick="enableEG(1);">Enable</a></p>
<p><a id="linkDisable" href="#" onclick="enableEG(null);">Disable</a></p>
<div class="gallery">
<a target="_blank" href="img/FOV_8967.JPG">
<img src="img/FOV_8967.JPG" alt="Goal 1" width="600" height="400" class="grayscale grayscale-off">
</a>
<div class="desc">Goal 1</div>
<a target="_blank" href="img/FOV_9088.JPG">
<img src="img/FOV_9088.JPG" alt="Goal 2" width="600" height="400" class="grayscale grayscale-off">
</a>
<div class="desc">Goal 2</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/jquery.gray.min.js"></script>
</body>
</html>
Any help will be appreciated!
Update:
Found that I can turn off the grayscale if I put a script executing on a Window Load event after calling the external js, and it works like a charm on a single index page!
<script>
$(window).on('load', function() {
alert ("script function: turn off gray");
enableEG(null);
});
</script>
However, I'm still looking for a more permanent solution, because this fix doesn't work on internal pages that go beyond the index of the site I'm testing.
I'm trying to make my website check the screen resolution and replace installed font icons (using #webfont) with plain text links, so that the site is more mobile friendly. Im using Opera Mobile Emulator to check if it works. the user interface I am using clearly comes back with a res of 480x320 (in the very top left of the page), yet the .innerHTML javascript isn't firing off. Any help?
<!DOCTYPE html>
<html>
<head>
<title>Harry's Bar</title>
<meta name="keywords" content="Harry's, bar, st. petersburg, florida, kenneth city, drink specials" />
<meta name="description" content="Harry's Bar in St. Petersburg, Florida. Drink specials every night!" />
<meta name="author" content="Internet Solutions of Florida" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="text/javascript">
var width=screen.width;
var height=screen.height;
document.write(width+'x'+height);
if (width<700)
{document.getElementById("homelink").innerHTML="Home";}
</script>
<div class="frame">
<div class="header">
<img class="logo" src="img/logo.png" alt="Harry's Bar" />
<div class="menu">
<ul>
<li><a id="homelink" href="index.html" title="home"></a></li>
<li><a id="drinklink" href="drinks.html" title="drink menu"></a></li>
<li><a id="piclink" href="images.html" title="picture gallery"></a></li>
<li><a id="directionslink" href="directions.html" title="directions"></a></li>
<li><a id="contactlink" href="contact.html" title="contact us"></a></li>
</ul>
</div>
</div>
That javascript is executing before the HTML is being loaded. So there is no element with the id of "homelink" when the javascript fires.
Additionally, by using document.write, you're effectively overwriting your original HTML, so the tag will never load anyway.
Get rid of the document.write call and place the script just before your closing body tag and it should work as intended.
document.write() is not needed. If you want to diagnose you may use document.title or create a div and divid.innerHTML
Make sure your testing on a <700 area
Add a DOM ready fire.
Place this at the end of the
Things should work then :)