kandi background

AR-Alphabets | Augmented Reality on Web for Kids to learn Alphabets | Augmented Reality library

Download this library from

kandi X-RAY | AR-Alphabets Summary

AR-Alphabets is a JavaScript library typically used in Virtual Reality, Augmented Reality applications. AR-Alphabets has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.
Augmented Reality on Web (Web AR) for Kids to learn Alphabets with fun. AR on all Mobile Devices

kandi-support Support

  • AR-Alphabets has a low active ecosystem.
  • It has 101 star(s) with 33 fork(s). There are 13 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 3 open issues and 3 have been closed. On average issues are closed in 0 days. There are no pull requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of AR-Alphabets is current.

quality kandi Quality

  • AR-Alphabets has 0 bugs and 0 code smells.

securitySecurity

  • AR-Alphabets has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • AR-Alphabets code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.

license License

  • AR-Alphabets is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.

buildReuse

  • AR-Alphabets releases are not available. You will need to build from source code and install.
  • Installation instructions are available. Examples and code snippets are not available.
  • AR-Alphabets saves you 125 person hours of effort in developing the same functionality from scratch.
  • It has 315 lines of code, 0 functions and 5 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
Top functions reviewed by kandi - BETA

kandi has reviewed AR-Alphabets and discovered the below as its top functions. This is intended to give you an instant insight into AR-Alphabets implemented functionality, and help decide if they suit your requirements.

  • initial setup

AR-Alphabets Key Features

Augmented Reality on Web (Web AR) for Kids to learn Alphabets with fun. AR on all Mobile Devices

AR-Alphabets Examples and Code Snippets

No Code Snippets are available at this moment for AR-Alphabets.Refer to component home page for details.

No Code Snippets are available at this moment for AR-Alphabets.Refer to component home page for details.

Community Discussions

Trending Discussions on AR-Alphabets
  • How to avoid chrome autoplay policy on JS code?
Trending Discussions on AR-Alphabets

QUESTION

How to avoid chrome autoplay policy on JS code?

Asked 2020-Sep-28 at 04:15

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();
}

ANSWER

Answered 2020-Sep-28 at 04:15

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

Source https://stackoverflow.com/questions/64089599

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install AR-Alphabets

Clone the repository or download and run the index.html in local server. for ex: You can create local server with python. "python -m SimpleHTTPServer 8000".

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Explore Related Topics

Build your Application

Share this kandi XRay Report