<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="waveform"></div>
</body>
<script src="../pixi/pixi.min.js"></script>
<script src="../pixi/pixi-spine.js"></script>
<script src="../pixi/pixi-sound.js"></script>
<script>
// PIXI.sound.add('boing',{
// url: 'static/assets/audios/Bg.mp3',
// preload: true,
// loaded: function(err, sound) {
// // const instance = sound.play();
// console.log('Duration: ', PIXI.sound.find('boing'), 'seconds');
// // instance.on('progress', function(progress) {
// // console.log('Amount played: ', Math.round(progress * 100) + '%');
// // });
// // instance.on('end', function() {
// // console.log('Sound finished playing');
// // });
// }
// });
window.waveform = new PIXI.Application({
1024,
height:128,
backgroundColor: 0xffffff
});
document.getElementById('waveform').appendChild(waveform.view);
PIXI.loader.add('applause', 'static/assets/audios/wrong.mp3')
.load(function(loader, resources) {
const sound = resources.applause.sound;
console.log(PIXI.sound.utils.render)
const baseTexture = PIXI.sound.utils.render(sound, {
waveform.renderer.width,
height: waveform.renderer.height,
fill: '#990'
});
const playhead = new PIXI.Graphics()
.beginFill(0xff0000)
.drawRect(0, 0, 1, waveform.renderer.height);
const sprite = new PIXI.Sprite(
new PIXI.Texture(baseTexture)
);
waveform.stage.addChild(sprite, playhead);
sound.play().on('progress', function(value) {
playhead.x = baseTexture.width * value;
console.log(playhead.x)
});
});
</script>
</html>
参考文档
https://github.com/pixijs/pixi-sound. 声音
https://www.bookstack.cn/read/LearningPixi/loading pixi中文翻译教程