Use SoundJS in React

Asked 1 years ago, Updated 1 years ago, 51 views

I want to use SoundJS using React, but I get an error.
I also use PreloadJS to load music files.
I am not sure what the error is, so I would appreciate it if you could let me know.

It works by scratching raw JS without React.

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
    ata(index.js:1)
localhost /:1 Uncaught (inpromise) DOMException: Unable to decode audio data
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styleed-components';

const InputBox=style.div`;

function init() {
  /* global createjs*/
  varqueue = 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 extensions 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"));

javascript reactjs

2022-09-30 20:21

1 Answers

It seems that the music file must be a path from index.html.


2022-09-30 20:21

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.