【App開發】有語音播報功能的搖號軟體：演示視頻、開發歷程

1 故事背景

昨晚網上有人找我制作一個自動亂數搖號并語音播報出來結果的App，具體播報要求為，搖號時的語音提示，搖出結果后，按“1號…，2號… …”這樣讀下去，可終止、暫停、繼續，

考慮到這App的開發在我的能力范圍內，便接了下來，由于這是我開發的第一個包含語音型別的軟體，因此特意將此次經歷記錄下來，

2 演示效果

重點是播報功能，但本站并不支持視頻功能，因此放到了 blibli 上：B站演示視頻鏈接

3 開發歷程

3.1 技術選用

我選用的是 Uniapp 平臺技術，可以將專案一鍵打包為多平臺的軟體，因客戶機型為安卓系統，我平時也是擅長 PC 開發，因此這個技術再合適不過了，

語音播報技術采用百度的語音播報介面：

#tex：內容
#per：音色
#spi：語速
https://tts.baidu.com/text2audio.mp3?tex=內容&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3;

3.2 語音播報功能

（注：建議 uni.createInnerAudioContext() 音頻對操作物件，在全文只創建一個）

（1）在全域創建音頻對操作物件

// 在js中創建音頻物件
var innerAudioContext = uni.createInnerAudioContext(); //uniapp中的音頻操作物件
innerAudioContext.autoplay = false; //禁止自動播放
innerAudioContext.src = ''; //音頻檔案的請求地址
innerAudioContext.crossOrigin="anonymous"; //解決跨域問題

（2）音頻播放、暫停、終止

playMusic(){ //播放音樂
	var that =this;
	if (this.tmp == 0) {
		innerAudioContext.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + '開始搖號，請稍等' +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3';   //this.per為音色：設定為1,2，3，有不同的音色,this.spd為朗讀的速度		//將生成的mp3賦值給innerAudioContext
		innerAudioContext.play();
	} else {
		innerAudioContext.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + '繼續搖號，請稍等' +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3';   //this.per為音色：設定為1,2，3，有不同的音色,this.spd為朗讀的速度		//將生成的mp3賦值給innerAudioContext
		innerAudioContext.play();
	}
	
	
	// --------setTimout方式
	// for (let i = 0; i < this.content.length; i++) {
		
	//     timeClear = (function(j) {
	//         setTimeout( function timer() {
	//             innerAudioContext.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + that.content[j] +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3';   //this.per為音色：設定為1,2，3，有不同的音色,this.spd為朗讀的速度		//將生成的mp3賦值給innerAudioContext
	//             innerAudioContext.play();
	//         }, j*3000 );
	//     })(i);
	// console.log(timeClear)
	// }
	
	
	// -----------setInterval方式
	clearInterval(clearNum);
	
	clearNum = setInterval(function() {
		console.log(that.content[i])
		innerAudioContext.src = 'https://tts.baidu.com/text2audio.mp3?tex=' + (that.tmp+1) +'號' + that.content[that.tmp] +'&cuid=baike&amp&lan=ZH&amp&ctp=1&amp&pdt=301&amp&vol=100&amp&rate=32&amp&per=1&spd=3';   //this.per為音色：設定為1,2，3，有不同的音色,this.spd為朗讀的速度		//將生成的mp3賦值給innerAudioContext
		innerAudioContext.play();
		that.tmp++;
		if (that.tmp == that.content.length) {
			clearInterval(clearNum)
			that.tmp = 0;
		}
	}, 5000)
},
			
pauseMusic() {
	clearInterval(clearNum);
},

stopMusic() {
	clearInterval(clearNum);
	this.tmp = 0;
}

3.3 生成亂數

getRandomNums(minNum, maxNum, size) {
if (parseInt(minNum) > parseInt(maxNum)) {
		uni.showToast({
			title:'輸入錯誤-1'
		})
		return;
	}
	
	console.log(minNum + " " + maxNum + " " + size)
	let numArr = [];
	if (this.repeat == '可重復') {
		console.log("yes-rnd")
		for (let i = 0; i < size; i++) {
			// Math.random()*(maxNum-minNum)+minNum：[minNum, maxNum)
			maxNum = parseInt(maxNum)
			minNum = parseInt(minNum)
			size = parseInt(size)
			let rnd = parseInt(Math.floor(Math.random()*(maxNum-minNum+1)+minNum));
			numArr.push(rnd);
		}
		// console.log(2222)
		console.log(numArr)
		// console.log(2222)
	} else {
		if ((parseInt(maxNum) - parseInt(minNum)) + 1 < parseInt(size)) {
			uni.showToast({
				title:'輸入錯誤-2'
			})
			return;
		}
		
		let i = 0;
		let numMap = {};
		while (i < size) {
		console.log("no-rnd")
			let rnd = parseInt(Math.random()*(maxNum-minNum+1)+minNum, 10) + 1;
			if (numMap[rnd] == undefined) {
				numMap[rnd] = '1';
				numArr.push(rnd);
				i++;
			}
		}
	}
	
    
    return numArr;
},

generateNums() {
	this.content = this.getRandomNums(this.minNum, this.maxNum, this.size);
	// console.log(this.content)
}

3.4 前端頁面撰寫