Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="viewport" content="width=device-width">
- <title>StereoPannerNode example</title>
- <link rel="stylesheet" href="">
- <!--[if lt IE 9]>
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- </head>
- <body>
- <h1>StereoPannerNode example</h1>
- <audio controls>
- <source src="omg.mp3" type="audio/mp3">
- <p>Browser too old to support HTML5 audio? How depressing!</p>
- </audio>
- <h2>Set stereo panning</h2>
- <input class="panning-control" type="range" min="-1" max="1" step="0.1" value="0">
- <span class="panning-value">0</span>
- </body>
- <script>
- var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
- var myAudio = document.querySelector('audio');
- var panControl = document.querySelector('.panning-control');
- var panValue = document.querySelector('.panning-value');
- // Create a MediaElementAudioSourceNode
- // Feed the HTMLMediaElement into it
- var source = audioCtx.createMediaElementSource(myAudio);
- // Create a stereo panner
- var panNode = audioCtx.createStereoPanner();
- // Event handler function to increase panning to the right and left
- // when the slider is moved
- panControl.oninput = function() {
- panNode.pan.value = panControl.value;
- panValue.innerHTML = panControl.value;
- }
- // connect the AudioBufferSourceNode to the gainNode
- // and the gainNode to the destination, so we can play the
- // music and adjust the panning using the controls
- source.connect(panNode);
- panNode.connect(audioCtx.destination);
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement