Vue中使用benz-amr-recorder插件实现播放amr音频文件以及在线url跨域问题解决

淡淡的烟草味﹌ 2023-09-30 15:35 9阅读 0赞

## 场景 ##

需要做一个Android端和Web端的聊天室，Android端的录音音频文件为.amr格式，除了

通过后台server端转码之后，是否可以通过插件在前端直接播放amr的音频文件。

### benz-amr-recorder ###

[AMR 录音机 | benz-amr-recorder][AMR _ _ benz-amr-recorder]

纯前端解码、播放、录音、编码 AMR 音频，无须服务器支持，基于 amr.js 和 RecorderJs。

在线演示demo

[AMR decode/encode tests][AMR decode_encode tests]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、安装插件

npm install benz-amr-recorder

2、播放amr

var amr = new BenzAMRRecorder();
    amr.initWithUrl('path/to/voice.amr').then(function() {
      amr.play();
    });
    amr.onEnded(function() {
      alert('播放完毕');
    })

3、在Vue中使用

<el-button type="button" @click="playAmrData">播放amr录音数据</el-button>
    
      data() {
        return {
          amr: null,
        };
      },

点击调用的方法

//播放amr音频文件
        playAmrData(){
          this.amr = new BenzAMRRecorder();
          this.amr.initWithUrl("http://ip:20201/profile/upload/2022/09/22/0dfd2965-0427-4cc8-9702-d4f7fdf9c047.amr")
          .then(()=>{
            this.amr.play();
          })
          .catch((e)=>{
            this.$message.error("播放失败");
          })
        },

注意：

上面的url是amr文件的网络url，这里是本地静态资源映射的地址。

4、跨域问题

但是在播放时提示跨域

![486a944f613a4f7191e2b64863b9c006.jpeg][]

看一下官方对于跨域问题的说明

![4e8ee757c5554549a2623af42aa088a7.jpeg][]

所以需要后台服务解决跨域问题。这里后台静态资源映射使用的SpringBoot

SpringBoot中重写addCorsMapping解决跨域以及提示list them explicitly or consider using “allowedOriginPatterns“ in

[SpringBoot中重写addCorsMapping解决跨域以及提示list them explicitly or consider using “allowedOriginPatterns“ in\_霸道流氓气质的博客-CSDN博客][SpringBoot_addCorsMapping_list them explicitly or consider using _allowedOriginPatterns_ in_-CSDN]

添加配置类代码

package com.chrisf.config;
     
    import com.chrisf.constant.Constants;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
     
     
    @Configuration
    @SuppressWarnings("SpringJavaAutowiredFieldsWarningInspection")
    public class ResourcesConfig implements WebMvcConfigurer {
     
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            /** 本地文件上传路径 */
            registry.addResourceHandler(Constants.RESOURCE_PREFIX + "/**").addResourceLocations("file:" + RuoYiConfig.getProfile() + "/");
        }
     
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")  // 拦截所有的请求
                    //.allowedOrigins("*")  // 可跨域的域名，可以为 *
                    .allowedOriginPatterns("*")
                    .allowCredentials(true)
                    .allowedMethods("*")   // 允许跨域的方法，可以单独配置
                    .allowedHeaders("*");  // 允许跨域的请求头，可以单独配置
        }
    }

[AMR _ _ benz-amr-recorder]: https://benzleung.github.io/benz-amr-recorder/
[AMR decode_encode tests]: https://benzleung.github.io/benz-amr-recorder/demo.html
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi
[486a944f613a4f7191e2b64863b9c006.jpeg]: https://img-blog.csdnimg.cn/486a944f613a4f7191e2b64863b9c006.jpeg
[4e8ee757c5554549a2623af42aa088a7.jpeg]: https://img-blog.csdnimg.cn/4e8ee757c5554549a2623af42aa088a7.jpeg
[SpringBoot_addCorsMapping_list them explicitly or consider using _allowedOriginPatterns_ in_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/127011172