git源码地址:
https://github.com/SunnyWoo/pcm_voice.git
效果图
将下面的组件文件直接放到我们的vue项目中运行即可看到效果
<template>
<div>
<!-- 播放pcm格式语音 -->
<section v-if="duration != '0'" @click="playVoice" class="qj_audio">
<span class="voice-normal" :class="{ voicePlay: isPlay }"></span>
<span> {{ duration }} </span>
</section>
</div>
</template>
<script>
export default {
data() {
return {
audio:
"https://qycdn.zhuoyoutech.com/qyresource/file/2020/2/27/MFLO584YPJNyQaa/680e0bc7-fdb8-4ae1-9f13-f3a0e574052c.pcm?13", //语音文件地址
duration: "0", //语音的时长
source: null, //AudioBuffer 对象 进行开始和停止语音
sounds: null, //获取的音频数据
isPlay: false //语音是否在播放
};
},
mounted() {
this.setDuration();
},
methods: {
setDuration() {
//问号后面的是语音时长 这里的语音时长 是服务器接口返回的
let last = this.audio.split("?")[1];
try {
if (last != 0) {
// 因为我们的语音 最长不会超过60秒 所以只做了秒的判断
if (last < 10) {
last = "0" + last;
}
this.duration = "00:" + last;
}
} catch (error) {
console.log(error);
}
},
playVoice() {
var _this = this;
if (this.isPlay) {
// 关闭语音
this.stopVoice();
} else {
_this.isPlay = true;
// 播放语音
if (this.sounds == null) {
// 首次加载语音文件
var req = new XMLHttpRequest();
req.open("GET", this.audio, true);
req.overrideMimeType("text\/plain; charset=x-user-defined");
req.onreadystatechange = function(aEvt) {
if (req.readyState == 4) {
if (req.status == 200) {
_this.sounds = req.responseText;
_this.startVoice(_this);
} else {
window.ToastShow("failed loading audio");
}
}
};
req.send(null);
} else {
// 直接播放
_this.startVoice(_this);
}
}
},
stopVoice() {
this.source.stop();
this.isPlay = false;
},
startVoice(_this) {
// Stereo 这里的逻辑没有进行深入研究 直接拿过来用了
var channels = 1;
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// Create an empty two second stereo buffer at the
// sample rate of the AudioContext
var frameCount = _this.sounds.length / 2;
var myAudioBuffer = audioCtx.createBuffer(channels, frameCount, 16000);
for (var channel = 0; channel < channels; channel++) {
var nowBuffering = myAudioBuffer.getChannelData(channel, 16, 16000);
for (var i = 0; i < frameCount; i++) {
// audio needs to be in [-1.0; 1.0]
// for this reason I also tried to divide it by 32767
// as my pcm sample is in 16-Bit. It plays still the
// same creepy sound less noisy.
var word =
(_this.sounds.charCodeAt(i * 2) & 0xff) +
((_this.sounds.charCodeAt(i * 2 + 1) & 0xff) << 8);
nowBuffering[i] = (((word + 32768) % 65536) - 32768) / 32768.0;
}
}
// Get an AudioBufferSourceNode.
// This is the AudioNode to use when we want to play an AudioBuffer
var sources = audioCtx.createBufferSource();
// set the buffer in the AudioBufferSourceNode
sources.buffer = myAudioBuffer;
// connect the AudioBufferSourceNode to the
// destination so we can hear the sound
sources.connect(audioCtx.destination);
// start the source playing
sources.start();
// When the buffer source stops playing, disconnect everything
sources.onended = function() {
_this.isPlay = false;
console.log("ended");
sources.disconnect(audioCtx.destination);
};
_this.source = sources;
}
}
};
</script>
<style lang="scss">
.qj_audio {
width: 400px;
height: 44px;
background: linear-gradient(
90deg,
rgba(255, 163, 201, 1),
rgba(206, 185, 255, 1)
);
border-radius: 4px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 20px;
cursor: pointer;
span {
font-size: 26px;
color: #ffffff;
margin-left: 15px;
}
span.voice-normal {
width: 32px;
height: 28px;
// background-image: url(../images/bliiq@2x.png);图片
background-repeat: no-repeat;
background-size: 100% 100%;
}
span.voicePlay {
// background-image: url(../images/bliiq_play.gif);播放中图片
}
}
</style>
以上代码参考了下面的js 可供大家参考 原理一直
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script type="text/javascript">
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// Stereo
var channels = 1;
var sounds = {};
function load(soundName) {
var req = new XMLHttpRequest();
// req.open('GET', soundName + ".raw", true);
req.open('GET', "https://qycdn.zhuoyoutech.com/qyresource/file/2020/2/19/C7Remioqc6rCHce/ddda38be-0430-4a87-ae80-28f2f0c91c04.pcm?16", true);
req.overrideMimeType('text\/plain; charset=x-user-defined');
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if (req.status == 200) {
sounds[soundName] = req.responseText;
document.getElementById('play-' + soundName).style.display = 'block';
} else {
alert('failed loading audio');
}
}
};
req.send(null);
}
function play(soundName) {
// Create an empty two second stereo buffer at the
// sample rate of the AudioContext
var frameCount = sounds[soundName].length / 2;
var myAudioBuffer = audioCtx.createBuffer(channels, frameCount, 16000);
for (var channel = 0; channel < channels; channel++) {
var nowBuffering = myAudioBuffer.getChannelData(channel, 16, 16000);
for (var i = 0; i < frameCount; i++) {
// audio needs to be in [-1.0; 1.0]
// for this reason I also tried to divide it by 32767
// as my pcm sample is in 16-Bit. It plays still the
// same creepy sound less noisy.
var word = (sounds[soundName].charCodeAt(i * 2) & 0xff) + ((sounds[soundName].charCodeAt(i * 2 + 1) & 0xff) << 8);
nowBuffering[i] = ((word + 32768) % 65536 - 32768) / 32768.0;
}
}
// Get an AudioBufferSourceNode.
// This is the AudioNode to use when we want to play an AudioBuffer
var source = audioCtx.createBufferSource();
// set the buffer in the AudioBufferSourceNode
source.buffer = myAudioBuffer;
// connect the AudioBufferSourceNode to the
// destination so we can hear the sound
source.connect(audioCtx.destination);
// start the source playing
source.start();
setTimeout(() => {
source.stop();
}, 2000);
}
function init() {
load("AminorPipe")
load("sinewave")
load("example")
}
</script>
</head>
<body onload="init();">
<div>
<button id="play-sinewave" type="button" onclick="play('sinewave')">Play sound 'sinewave'</button>
</div>
<div>
<button id="play-AminorPipe" type="button" onclick="play('AminorPipe')">Play sound 'A minor pipe'</button>
</div>
<div>
<button id="play-example" type="button" onclick="play('example')">Play sound 'example'</button>
</div>
</body>
</html>