Adjust the playlist based on the spinning motion using jQuery

Can I restrict playing French music only when the "world" angle is between 0 degrees and 27 degrees? The world rotates based on scrolling. Thank you, everyone :)

$(document).ready(function() {
var angle,
scroll = 0;
var $world = $('#world');
var $body = $('body');

// French music var $french = $('#french');

$(window).scroll(function() {

angle = $body.scrollTop() / 28;
$world.css('-moz-transform', 'rotate('+angle+'deg)').css('-webkit-transform', 'rotate('+angle+'deg)').css('-o-transform', 'rotate('+angle+'deg)').css('-ms-transform', 'rotate('+angle+'deg)');


$(french)[0].play(); 

console.log(scroll);
});
});

update

Is this right? I still can't play any other music besides the first one (French).

            if(angle >=0 && angle <=26) {
        $(french)[0].play();
    }
    if(angle >27 && angle <=74) {
        $(british)[1].play();
    }
    if(angle >75 && angle <=115) {
        $(ny)[2].play();
    }
    if(angle >116 && angle <=164) {
        $(la)[3].play();
    }
    if(angle >165 && angle <=210) {
        $(japanese)[4].play();
    }
    if(angle >211 && angle <=270) {
        $(chinese)[5].play();
    }
    if(angle >271 && angle <=310) {
        $(indian)[6].play();
    }
    if(angle >311 && angle <=333) {
        $(egyptian)[7].play();
    }

Answer №1

$(window).scroll(function() {

rotation = $body.scrollTop() / 28;
$world.css({'-moz-transform': 'rotate('+angle+'deg)',
           '-webkit-transform':'rotate('+angle+'deg)',
           '-o-transform': 'rotate('+angle+'deg)',
           '-ms-transform': 'rotate('+angle+'deg)'});

if(rotation >=0 || rotation <=27)
{$(german)[0].play(); 
}
console.log(scroll);

update

if(rotation >=28 || rotation <=72)
{$(german)[1].play();
// another music play 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Seeking a window-adjustable table with stationary headers

I have been searching high and low for a solution to my issue but have come up empty-handed. My goal is to create a table with fixed headers that remain visible while scrolling through the rest of the table. The catch is, I also need it to align properly w ...

Learn the steps for inserting or updating data in a local JSON file solely through JavaScript

Currently, I am in the process of reading a JSON file and removing an element once it finds an exact match. My goal is to then push the remaining data back into the JSON file after deletion. readJsonFile("./objects.json", function(jsonData){ let parsedD ...

A method that sorts an array of objects based on their properties

I am currently working with two specific objects: clinics: [ { id: 1, name: 'New Hampshire Veterinarian Clinic', plans: [ 'handle123', 'handle567', ] }, { ...

Error encountered when attempting to access a dropdown menu on a website due to a NoSuchElementException

In my current project using Python with selenium, I am encountering an issue while trying to interact with a list box on a webpage. The error message that I receive is as follows: selenium.common.exceptions.NoSuchElementException: Message: Unable to loca ...

Exploring the Module System of TypeScript

I am working with a TypeScript module structured like this: let function test(){ //... } export default test; My goal is for tsc to compile it in the following way: let function test(){ //... } module.exports = test; However, upon compilation, ...

Utilize flexbox to align two buttons side by side and manage their positioning

I have a collection of buttons that I want to display in rows of two. I am looking for a way to set the specific width of each button and decide whether they should be aligned left, center, or right. Ideally, the outcome would resemble the following: http ...

Can the floated DIVs be prevented from breaking onto a new line if they exceed the container's width?

Take a look at this sample HTML code: <div id="container" style=""> <div id="left" style="float: left; width: 200px;">...</div> <div id="right" style="float: right; width: 100px;">...</div> </div> How can we prevent ...

Displaying a sneak peek of the information along with a "See More" button beneath the title in React

My goal is to create a section header followed by preview content that defaults to showing only the first few lines. The text would then fade out, with an option to expand on click labeled "Show More." This functionality is similar to how Reddit displays p ...

Type of Data for Material UI's Selection Component

In my code, I am utilizing Material UI's Select component, which functions as a drop-down menu. Here is an example of how I am using it: const [criteria, setCriteria] = useState(''); ... let ShowUsers = () => { console.log('Wor ...

Is there a way to show escaped html code on the blog editing page?

After developing a Content Management System (CMS), I encountered an issue with code formatting in my blog posts. <pre> <code> &lt;input type=&quot;color&quot; name=&quot;favcolor&quot; /&gt; </code> < ...

Retrieving the value of the option that has been selected from a dropdown

I have successfully implemented a drop-down menu with the following code: // Creating a select element for priority within a form in the bottom row div const formPriority = document.createElement("select"); formPriority.setAttribute("name","project"); form ...

What is the best way to set the width of an inner element as a percentage of the Body's width?

Applying a percentage width to any inner element of a page will typically result in that element taking a percentage of its parent container's width. Is there a way to specify the width of an inner element as a percentage of the overall Body width, r ...

Require modifying the radio button's value based on the presence of a certain class in an input field

Feeling overwhelmed. I am currently working on implementing a credit card auto system using the Stripe Payment plugin, but I find myself at a loss. Specifically, when a MasterCard is entered in the card number input field, it should receive the "masterca ...

Utilizing VueJs @error handler for managing broken image links

I am encountering a strange issue with the VueJS @error handler. My goal is to hide images with broken links and display a placeholder instead. However, when I have two images with broken links, only the first image displays the placeholder while the other ...

Difficulty in utilising jQuery to serialize HTML form

Hey there, I'm just starting out with ASP.NET development and I'm having trouble figuring out how to properly serialize a form using jQuery. Check out this screenshot for more details: https://i.stack.imgur.com/0UFLX.png <html xmlns="http://w ...

Constructing a horizontal slider using vertically floating divs

Struggling to create a basic horizontal image slider using overflow:hidden and floating divs. Despite efforts, the divs keep stacking vertically instead of horizontally. Numerous online examples have been attempted without success. HTML: <div id="slid ...

The Node.js timestamp is later than the current date of the client

When storing data in MongoDB with the recording date, I utilize new Date() in Node.js and return that date with an AJAX response. To calculate the elapsed time from when the data was stored in MongoDB, I create a new date on the client-side. Then, I determ ...

Unblocking the context menu: How entering JS directly into the address bar compares to using a bookmark

Exploring the concept of blocking the context menu using JavaScript. Here's how you can block such a menu: document.addEventListener('contextmenu', event => event.preventDefault()); I recently came across an article that mentioned this ...

Issue with Magnific Popup lightbox functionality, and mfp-hide is ineffective

Hello everyone, I am new to stackoverflow so please bear with me as I navigate through it. Although I am still a beginner in HTML, CSS, and JS, I have been using them for work on occasion. Recently, I implemented Magnific Popup on a website I am working o ...

Double-column design for viewing on both computers and mobile devices

Check out my fiddle: https://jsfiddle.net/b6q7pmkg/ I'm attempting to create a layout with two-column cards that will maintain two-column structure across both mobile and desktop viewports. Here's what I envision: On desktop: https://i.sstatic.ne ...