質問内容
Reactを使ってSoundJSを使いたいのですが、エラーが出てしまいます。
また、音楽ファイルの読み込みにPreloadJSを使っています。
エラーの内容がよくわからないので教えていただけると幸いです。
Reactを使わない生JSでかくと動きます。
エラー文
Uncaught Error: The error you provided does not contain a stack trace.
at S (index.js:1)
at V (index.js:1)
at index.js:1
at index.js:1
at a (index.js:1)
localhost/:1 Uncaught (in promise) DOMException: Unable to decode audio data
ソースコード
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
const InputBox = styled.div``;
function init(){
/* global createjs */
var queue = new createjs.LoadQueue(true);
queue.installPlugin(createjs.Sound);
var manifest = [
{"src":"./music/test.mp3","id":"sound1"}
];
queue.loadManifest(manifest,true);
queue.addEventListener('fileload',handleFileLoad);
queue.installPlugin(createjs.Sound);
function handleFileLoad(event){
var item = event.item;
var type = item.type;
if(createjs.Types.SOUND === type){
startSound(item.id);
}
}
function startSound(soundid){
var instance = createjs.Sound.createInstance(soundid);
instance.volume = 0.1;
function doStop(){
instance.stop();
}
function doPlay(){
instance.play();
}
document.getElementById('stop').addEventListener('click',doStop);
document.getElementById('play').addEventListener('click',doPlay);
}
}
window.onload = function(){
init();
}
class Main extends React.Component {
render() {
return (
<span>
<InputBox>
<input type="button" id="play" value="play"></input>
<input type="button" id="stop" value="stop"></input>
</InputBox>
</span>
);
}
}
// ========================================
ReactDOM.render(<Main />, document.getElementById("root"));