Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask a question.

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

The Archive Base

The Archive Base Logo The Archive Base Logo

The Archive Base Navigation

  • SEARCH
  • Home
  • About Us
  • Blog
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Add group
  • Groups page
  • Feed
  • User Profile
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Buy Points
  • Users
  • Help
  • Buy Theme
  • SEARCH
Home/ Questions/Q 8960547
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Editorial Team
Asked: June 15, 20262026-06-15T15:40:59+00:00 2026-06-15T15:40:59+00:00

So that I can use the information to coordinate a page animation like making

  • 0

So that I can use the information to coordinate a page animation like making elements brighter as the decibel levels get higher

  • 1 1 Answer
  • 0 Views
  • 0 Followers
  • 0
Share
  • Facebook
  • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. Editorial Team
    Editorial Team
    2026-06-15T15:41:01+00:00Added an answer on June 15, 2026 at 3:41 pm

    This approach will work in Chrome / Safari:

    +function(){
      
      var ctx = new AudioContext()
        , url = 'https://cf-media.sndcdn.com/OfjMZo27DlvH.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vT2ZqTVpvMjdEbHZILjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE1MTUwNDM5Njd9fX1dfQ__&Signature=FfmL2qUssAKs3Z7EPoYo0Yq8-SAg8rKLPs65EasXwuVkfsOB4joFqeCvVR2elpaG-lJaV4hXpXFiRCDWXNOYyAtO4Oz~sexiPwIoSk8-jWiVbGQRS8TMmUmj7TJzxemMOIj7ugWJKk6PHsrUdgqs9woDpHzxmkGCzk6sfqJEIsdeZJ4rWUFAh4iGWn9M6b0xfzTgndAJmytkNj9raCpWCBVmdr5u-r9nt~q5uF1easNSW9oaFilM4s1Hq2ei~VJye8zW9bzvrGm8idVdy-tiPeMWAKcE8J2VuaS1Ret6jRTRaHTDuiNgA5sZvgTzNpEpKtWI7UmAWI5TrqNVSlxpgQ__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ'  
        , audio = new Audio(url)
        // 2048 sample buffer, 1 channel in, 1 channel out  
        , processor = ctx.createScriptProcessor(2048, 1, 1)
        , meter = document.getElementById('meter')
        , source
        
      audio.crossOrigin = 'anonymous'
    
      audio.addEventListener('canplaythrough', function(){
        source = ctx.createMediaElementSource(audio)
        source.connect(processor)
        source.connect(ctx.destination)
        processor.connect(ctx.destination)
        audio.play()
      }, false);
      
      // loop through PCM data and calculate average
      // volume for a given 2048 sample buffer
      processor.onaudioprocess = function(evt){
        var input = evt.inputBuffer.getChannelData(0)
          , len = input.length   
          , total = i = 0
          , rms
        while ( i < len ) total += Math.abs( input[i++] )
        rms = Math.sqrt( total / len )
        meter.style.width = ( rms * 100 ) + '%'
      }
      
    }()
    #meter {
      width: 0%;
      height: 15px;
      margin: 2px 0;
      background: green;
      -webkit-transition: width .05s;
    }
    <div id="meter"></div>

    The important stuff happens here:

    processor.onaudioprocess = function(evt){
      var input = evt.inputBuffer.getChannelData(0)
        , len = input.length   
        , total = i = 0
        , rms
      while ( i < len ) total += Math.abs( input[i++] )
      rms = Math.sqrt( total / len )
      meter.style.width = ( rms * 100 ) + '%' 
    }
    

    Basically, you grab the raw PCM data (values from -1 to 1) every 2048 samples and you loop through them, calculating the average signal level over the given period of time.

    You can then use that value to do your animations.

    Edit:
    Updated to use RMS, which as Jason pointed out is a more meaningful measurement.

    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Sidebar

Related Questions

I have a web application that you can use to import information from another
I have a DLL that I can use to pull the following information about
Are there any opencv function like cvHoughCircles() that can use for square detection programming
I'm writing a page that can use a couple of different themes, and I'm
We've requested a company to write a webservice that we can use to get
Is there a built parser that I can use from C# that can parse
I'm using .NET webforms. I have a grid view that can use Eval(Name) in
I know that can't use left join in indexed view. but I don't understand
I know that you can use static libraries to manage dependencies for iOS apps.
I've noticed that you can use python libdiff to output a side by side

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help
  • SEARCH

Footer

© 2021 The Archive Base. All Rights Reserved
With Love by The Archive Base

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.