前端纯Js处理amr在页面上直接播放

1900_xxz
269 阅读1分钟

我的后端返回的地址

是这种后缀带有amr的链接，需要前端直接解析链接，在页面上点击就播放

http://192.168.10.112:8888/febs-web/conversationFile/20230910/voice/0a4cf2be8047b0a23.amr。

先提供解决方案，再分享几种其他的amr转码

思路是先将后端返回文件，转换base64，再引入以下js，直接播放base64。

底部放下载地址

先引入
        <script src="until/audio.min.js"></script>
        <script src="until/voice-2.0.js"></script>

js使用
        RongIMLib.RongIMVoice.init();//初始化
        document.getElementById("playId").onclick = function() {
                RongIMLib.RongIMVoice.play(reader.result);
        };
        document.getElementById("stopId").onclick = function() {
                RongIMLib.RongIMVoice.stop(reader.result);
        };

下面放案例

方法1、

 $a=file_get_contents("./a.amr");
 $b=base64_encode($a);
// echo $b;
// die;
 
 ?>
 
<!DOCTYPE HTML>
<html>
<head>
<script src="audio.min.js"></script>
</head>
<script src="voice-2.0.js"></script>
 
<script>
 
 
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
<body>
 
<input type="button" value="play" id="playId"/>
<input type="button" value="stop" id="stopId"/>
 
</body>
<script type="text/javascript">
RongIMLib.RongIMVoice.init();
document.getElementById("playId").onclick = function(){
    RongIMLib.RongIMVoice.play("<?php echo $b;?>");
};
document.getElementById("stopId").onclick = function(){
    RongIMLib.RongIMVoice.stop();
};
</script>
</html>

方法2、 这种针对后缀不是amr的，amr文件

        const jsonData = {
                    "id": 13851845,
                    "jsonData": "{\"msgid\":\"2713251583848741802_1692862879074_external\",\"action\":\"send\",\"from\":\"wmnaQNEQAAVYt9canEWYnEO14fQECdhQ\",\"tolist\":[\"LiuLanLan01\"],\"roomid\":\"\",\"msgtime\":1692862874183,\"msgtype\":\"voice\",\"voice\":{\"md5sum\":\"21db5f9ce1369e3dbfcc09f695ce0aba\",\"voice_size\":2680,\"play_length\":4,\"sdkfileid\":\"CtsDKjEqaDF0VmRKemZ4cmNWMHF0T1FyK2JYWmdZb3NkcG1WMEN3T3pOaGRUTHlNVmUxeXpTRksxeVphZDlUTi9wK3AzSnQyZW92czRQZ1JUOXVudElWbStPNXVuN2tTdHNyRm82UDlxQjUrT2JQNExsQTI0Q3FmUmpMVGlraUlZWXlEQzdpVVJmcGgraGhIWFIrNDJXNVNRaUNBaTVXS0t2R2RKRkh1RkVDcVlsZWt1S09id2R6cXY0WkxNRUtTTGdTRmx5RTdRSHZSQ1ltaGR0VjRmZTNlcTFnckRnTStDOTgraGV5U2F4NXk5QlVQZU5URmZwcnorOE5xSW5GUU9BMUlmdzVMWE9zSDNTRjQrNHZsNyswbEhJY1pSRVNPUTRETHYyTzBBOGNOUE1EelJXVFdRd0trOWtxN1hGWHFRVVR6b01OUnZaZklXOFpXbFlPdHZ6VWc0bkdlWHQzNStJazcyVEdaVnJVcUpCa1lyOUF0ZnJUOUFwYi9mK0IxZUFocExuYjFORVNVeVRTZEVjN1hEWGpxQ1VBRFp3eS9oVlBTeFU3UnIxeS9Za1RwYzZ3cmY5WXh6bURua0d6YjhNYStUQ3JqSVQwYkdmMXBmZWp1MnZ6SnRJWEE9PRI4TkRkZk56ZzRNVE13TURFMU9UazBOekUxT1Y4NE1qazFOVGd6TXpCZk1UWTVNamcyTWpnM09RPT0aIDZmNzk3MjYxNjI2MTY1Njg2MzYxNmE2MTY1NmE2Mjdh\"}}",
                };
        const jsonDataObject = JSON.parse(jsonData.jsonData);
        const audioData = jsonDataObject.voice.sdkfileid;
        const base64AudioData = btoa(audioData);
        console.log(base64AudioData);

方法3、针对amr返回链接文件，用FileReader，再解码播放

const fileUrl = "http://192.168.19.112:8888/febs-web/conversationFile/20230910/voice/0a4cf2be80472bf1894d125ff20b0a23.amr";

    // 使用Fetch API下载文件
    fetch(fileUrl)
      .then(response => {
        if (response.ok) {
          return response.blob()
        } else {
          throw new Error("Failed to fetch file.");
        }
      })
      .then(blob => {
        const reader = new FileReader();
        reader.onloadend = function () {
          const base64Data = reader.result.split(",")[1]; // 去除data URL前缀部分

          // Base64编码的数据
          console.log("Base64 data:", base64Data);
          // 在这里可以进一步处理Base64数据，例如将其用于播放或其他用途
        };

        reader.readAsDataURL(blob);
      })

方法 4、针对本地amr解析base64，再播放


	<input type="file" id="fileInput">
        
        fileInput.onchange = function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function() {
                console.log('这里就是处理好的base64 :>> ', reader.result);
                RongIMLib.RongIMVoice.init();
                document.getElementById("playId").onclick = function() {
                        RongIMLib.RongIMVoice.play(reader.result);
                };
                document.getElementById("stopId").onclick = function() {
                        RongIMLib.RongIMVoice.stop(reader.result);
                };
        };
};

方法5、使用库找了巨久，非常难受


$(document).ready(function() {
        var tl = new TimelineMax();
        tl.to('.player__albumImg', 3, {
                rotation: '360deg',
                repeat: -1,
                ease: Power0.easeNone
        }, '-=0.2');
        tl.pause();
        上面是一个播放动画。无关重要
        
        var b = './until/1.amr' 这里替换成你的amr链接
        var amr = new BenzAMRRecorder();
        amr.initWithUrl(b).then(function() {
            $('.player__play').click(function() {
                if ($('.player').hasClass('play')) {
                        $('.player').removeClass('play');
                        amr.pause();//暂停
                        TweenMax.to('.player__albumImg', 0.2, {
                                scale: 1,
                                ease: Power0.easeNone
                        })
                        tl.pause();
                } else {
                        $('.player').addClass('play');
                        amr.play();//播放
                        TweenMax.to('.player__albumImg', 0.2, {
                                scale: 1.1,
                                ease: Power0.easeNone
                        })
                        tl.resume();
                }
            });
        });
        amr.onAutoEnded(function() {
                console.log('播放结束:取消播放样式>> ', );
                $('.player').removeClass('play');
          TweenMax.to('.player__albumImg', 0.2, {
                scale: 1,
                ease: Power0.easeNone
          })
          tl.pause();
        });

image.png

最后贴一个，巨简单的播放暂停

	<!-- 语音消息 -->
<div class="player">
        <div class="player__bar">
        <div class="player__album">
                <div class="player__albumImg active-song" data-author="Khalid" data-song="Location"style="background-image: url(img/1.png)"> </div>
        </div>
        <div class="player__controls">
                <div class="player__prev">
                        播放
                </div>
                <div class="player__play">
                        暂停
                </div>
                <div class="player__next">
                        下载
                </div>
        </div>
</div>
</div>

<script>
防抖函数，避免用户一直去点播放
function debounce(fn, delay, isInit = false) {
        let timer = null;
        //用户是否首次输入
        let initInt = true;
        return function (...args) {
          // 如果用户传入了true并且是首次输入
          if (isInit && initInt) {
            // 如果是首次输入，则立即执行
            fn.apply(this, args);
            // 将立即执行变量置为false，以便进入到防抖的代码中
            initInt = false;
          } else {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
              fn.apply(this, args);
              // 将立即执行变量为true，以便下次进入到立即执行的代码里
              initInt = true;
            }, delay);
          }
        };
      };
        $(document).ready(function() {
                var tl = new TimelineMax();
                tl.to('.player__albumImg', 3, {
                        rotation: '360deg',
                        repeat: -1,
                        ease: Power0.easeNone
                }, '-=0.2');
                tl.pause();
                var b = './until/1.amr'
                var amr = new BenzAMRRecorder();
                        amr.initWithUrl(b).then(function() {
                        $('.player__prev').click(_.debounce(function() {
                                amr.play();
                                $('.player__play').removeClass('btn');
                                $('.player__prev').addClass('btn');
                                TweenMax.to('.player__albumImg', 0.2, {
                                        scale: 1.2,
                                        ease: Power0.easeNone
                                })
                                tl.resume();//播放
                        },2000, { 'leading': true, 'trailing': false }))
                        $('.player__play').click(function() {
                                amr.stop();
                                $('.player__prev').removeClass('btn');
                                $('.player__play').addClass('btn');
                                TweenMax.to('.player__albumImg', 0.2, {
                                        scale: 1,
                                        ease: Power0.easeNone
                                })
                                tl.pause();
                        });
                });
                amr.onAutoEnded(function() {
                        console.log('播放到结尾 :>> ', );
                  TweenMax.to('.player__albumImg', 0.2, {
                        scale: 1,
                        ease: Power0.easeNone
                  })
                  $('.player__prev').removeClass('btn');
                  $('.player__play').addClass('btn');
                  tl.pause();
                });
                amr.getDuration(function() {
                        console.log('b :>> ', b);
                });
                // 下载
                $('.player__next').click(function() {
                        console.log('下载 :>> ', );
                        $('.player__prev').removeClass('btn');
                        $('.player__play').removeClass('btn');
                });
        });
</script>

想用百度网盘放Js。。扔不进去，有需要给我留言吧

avatar
文章
阅读
粉丝