feat: Add volume adjust to PlayerBig (#2)

orhun · Dec 1, 2021 · c9d95ab · c9d95ab
1 parent dc5581d
commit c9d95ab
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 3 deletions.
diff --git a/components/Player.js b/components/Player.js
@@ -15,6 +15,7 @@ import { generateEmbedString, getRandomInt, showToast } from "../utils";
 function Player({ sharedTrackId, backSideContent, latestId }) {
   const [isPlay, setIsPlay] = React.useState(false);
   const [player, setPlayer] = React.useState(null);
+  const [volume, setVolume] = React.useState(80);
   const [maxId] = React.useState(latestId);
   const [trackId, setTrackId] = React.useState(
     sharedTrackId ? sharedTrackId : getRandomInt(0, latestId)
@@ -126,7 +127,7 @@ function Player({ sharedTrackId, backSideContent, latestId }) {
   );
 
   React.useEffect(() => {
-    setPlayer(new ChiptuneJsPlayer(new ChiptuneJsConfig(0)));
+    setPlayer(new ChiptuneJsPlayer(new ChiptuneJsConfig(0, volume)));
   }, []);
 
   React.useEffect(() => {
@@ -279,6 +280,8 @@ function Player({ sharedTrackId, backSideContent, latestId }) {
               progress={progress}
               max={max}
               player={player}
+              volume={volume}
+              setVolume={setVolume}
               isPlay={isPlay}
               togglePlay={togglePlay}
               setProgress={setProgress}

diff --git a/components/PlayerBig.js b/components/PlayerBig.js
@@ -34,6 +34,8 @@ function PlayerBig({
   progress,
   max,
   player,
+  volume,
+  setVolume,
   isPlay,
   togglePlay,
   setProgress,
@@ -222,6 +224,23 @@ function PlayerBig({
           disable={loading ? "true" : "false"}
         />
       </div>
+      <Slider
+        railStyle={{ backgroundColor: "white", height: 6 }}
+        trackStyle={{ backgroundColor: "#bd00ff", height: 6 }}
+        handleStyle={{
+          borderColor: "#bd00ff",
+          backgroundColor: "#bd00ff",
+        }}
+        className={styles.seekbar}
+        value={volume}
+        min={0}
+        max={100}
+        step={1}
+        onChange={(val) => {
+          setVolume(val);
+          player.setVolume(val);
+        }}
+      />
       <div className={styles.footer}>
         <div className={styles.footerLeft}>
           <QuestionIcon

diff --git a/public/chiptune2.js b/public/chiptune2.js
@@ -1,3 +1,5 @@
+const OPENMPT_MODULE_RENDER_MASTERGAIN_MILLIBEL = 1
+
 var libopenmpt = {};
 
 libopenmpt.locateFile = function(name) {
@@ -8,8 +10,9 @@ let ChiptuneAudioContext = {};
 
 ChiptuneAudioContext = window.AudioContext || window.webkitAudioContext;
 
-function ChiptuneJsConfig(repeatCount) {
+function ChiptuneJsConfig(repeatCount, volume) {
   this.repeatCount = repeatCount;
+  this.volume = volume;
 }
 
 function ChiptuneJsPlayer(config) {
@@ -124,7 +127,22 @@ ChiptuneJsPlayer.prototype.play = function(buffer) {
   processNode.connect(this.context.destination);
 };
 
-ChiptuneJsPlayer.prototype.stop = function() {
+/**
+ * Set player volume
+ * @param volume [0..100],
+ */
+ChiptuneJsPlayer.prototype.setVolume = function (volume) {
+  this.config.volume = volume
+  if (this.currentPlayingNode != null) {
+    libopenmpt._openmpt_module_set_render_param(
+      this.currentPlayingNode.modulePtr,
+      OPENMPT_MODULE_RENDER_MASTERGAIN_MILLIBEL,
+      percToMillibel(volume),
+    );
+  }
+};
+
+ChiptuneJsPlayer.prototype.stop = function () {
   if (this.currentPlayingNode != null) {
     this.currentPlayingNode.disconnect();
     this.currentPlayingNode.cleanup();
@@ -167,6 +185,11 @@ ChiptuneJsPlayer.prototype.createLibopenmptNode = function(buffer, config) {
     0,
     0
   );
+  libopenmpt._openmpt_module_set_render_param(
+    processNode.modulePtr,
+    OPENMPT_MODULE_RENDER_MASTERGAIN_MILLIBEL,
+    percToMillibel(config.volume),
+  );
   var stack = stackSave();
   libopenmpt._openmpt_module_ctl_set(
     processNode.modulePtr,
@@ -285,3 +308,26 @@ function asciiToStack(str) {
   writeAsciiToMemory(str, stackStr);
   return stackStr;
 }
+
+// Convert range of decibel to percentage and back again
+// https://gist.github.com/below9k/cf17e10341cb5c61a03a53a64cc35fb2
+function percToMillibel(perc) {
+  let mB = 0;
+
+  if (perc === 0) {
+    mB = -6000;
+  } else if (perc <= 80) {
+    // 0..80% = -6000..0 millibel
+    mB = Math.round(100 *
+      20 * Math.log(perc * (100 / 80) * 0.01) / Math.log(10)
+    );
+  } else if (perc <= 100) {
+    // 80..100% = 0..1000 millibel
+    // 10 db ~= 316.227766%
+    mB = Math.round(100 *
+      20 * Math.log((100 + (perc - 80) / 20 * 216.227766) * 0.01) / Math.log(10)
+    );
+  }
+
+  return mB;
+}