

# 質問内容

Reactを使ってSoundJSを使いたいのですが、エラーが出てしまいます。  
また、音楽ファイルの読み込みにPreloadJSを使っています。  
エラーの内容がよくわからないので教えていただけると幸いです。

Reactを使わない生JSでかくと動きます。

# エラー文

[code]

    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
    
[/code]

# ソースコード

[code]

    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"));
    
[/code]


CC BY-SA 4.0
2020-05-15T18:21:08.263
66648
2022-10-12T07:07:40.917
2020-06-17T08:14:45.997
-1
29881
question
javascript reactjs
ReactでSoundJSを使う


音楽ファイルはindex.htmlからのパスでないといけないらしいです。


CC BY-SA 4.0
2020-05-16T05:12:56.210
66661
2020-05-16T05:12:56.210
29881
66648
answer