vue播放音频
安装npm install vue-audio --save页面<audio id="resource" :src="audioSrc" controls autoplay="autoplay"></audio>自动播放autoplay=“autoplay”初始化音频data() {return {audioSrc:require('@/assets/Jay.mp3'),}
·
安装
npm install vue-audio --save
页面
<audio controls="controls" hidden src="./static/audio/tsy.wav" ref="audio"></audio>
this.$refs.audio.currentTime = 0; //从头开始播放提示音
this.$refs.audio.play(); //播放
<audio id="resource" :src="audioSrc" controls autoplay="autoplay" v-show='yinpinshow'></audio>
自动播放autoplay=“autoplay”
隐藏页面元素v-show=‘yinpinshow’
初始化音频
data() {
return {
audioSrc:require('@/assets/Jay.mp3'),
yinpinshow:false
}
}
动态改变音频地址
this.audioSrc=require('@/assets/hgtc.mp3')
配置webpack.base.conf.js
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
// name: utils.assetsPath('media/[name].[hash:7].[ext]')
name: utils.assetsPath('assets/[name].[hash:7].[ext]')
}
},
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
try {
var context = new window.AudioContext();;
var source = null;
var audioBuffer = null;
function stopSound() {
if (source) {
source.stop(0); //立即停止
}
}
function playSound() {
source = context.createBufferSource();
source.buffer = audioBuffer;
source.loop = false; //循环播放
source.connect(context.destination);
source.start(0); //立即播放
}
function initSound(arrayBuffer) {
context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数
audioBuffer = buffer;
playSound();
}, function(e) { //解码出错时的回调函数
console.log('Error decoding file', e);
});
}
function loadAudioFile(url) {
var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) { //下载完成
initSound(this.response);
};
xhr.send();
}
loadAudioFile('./static/audio/tsy.mp3');
$("#stop").click(function() {
stopSound();
});
} catch (e) {
console.log('!Your browser does not support AudioContext');
}
更多推荐
已为社区贡献4条内容
所有评论(0)