uniapp将文章内容转为音频并朗诵

ゝ一纸荒年。 2023-01-06 01:41 135阅读 0赞

## **将文章内容转为音频并朗诵** ##

**一.创建一个标签用来控制音频播放和暂停**

**二.全局创建一个音频对象**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]

// 在js中创建音频对象
      var innerAudioContext = uni.createInnerAudioContext();
      innerAudioContext.autoplay = false;			//不让它自动播放
      innerAudioContext.src = '';

**三.在获取文章内容中将文章进行处理**

//contents是我的文章内容
     contents = contents.replace(' ', '');			//先将内容中的空格删掉
      if (contents.length > 500) {			//限制播放的长度大小
                    this.tex = contents.substr(0, 500);
                    var encoded = encodeURI(this.tex);		//文章中如果含有%之类的符号，这一步非常重要（将一些符号转译）
                    this.tex = encoded;
                  } else {
                    var encoded = encodeURI(extras);
                    this.tex = encoded;
                  }

**四.将内容使用百度tts进行语音识别**

this.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + this.tex +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=' + this.per + '&spd=' + this.spd;   //this.per为音色：设置为1,2，3，有不同的音色,this.spd为朗读的速度
     innerAudioContext.src = this.src;		//将生成的mp3赋值给innerAudioContext

**五.在点击事件中播放音频**

playMusic(){		//播放音乐
    		var this1 =this;
    		innerAudioContext.play();		//直接播放
    		innerAudioContext.onPlay(function() {		//暂停之后点击播放继续播放
    	       if (this1.currentTime) {
    	           innerAudioContext.seek(this1.currentTime)
    	        }
    	   })
    	   this.Music=true;
    	},
    	stopMusic(){		//暂停音乐
    		var this1 =this;
    		 innerAudioContext.onPause(function() {
                console.log('暂停播放');
                this1.currentTime = innerAudioContext.currentTime;
              })
               this.Music=false;
    	}

*目前h5和APP都可以正常使用*

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]: /images/20221119/f43388a9a6f149c99923b20505dc97e0.png