react加载背景音乐，ReactHowler和微信的WeixinJSBridgeReady

react里，使用音乐，可以用reacthowler插件。

https://github.com/thangngoc89/react-howler

  <ReactHowler
              src={require('../../images/media/music.mp3')}
              playing= {this.state.music} 
              loop  =  {this.state.loop} 
            />

---------

但是在ios时，不让自动加载。怎么办？

考虑项目需求主要是微信方面

所以用用WeixinJSBridgeReady

 
 document.addEventListener("WeixinJSBridgeReady",this.playMusic,false);

  ----

另外用到

<audio  ref={this.musicid}  style={{display:`none`}} src={audioUrl} id="music" loop controls></audio>
那么得到dom，就得用： https://reactjs.org/docs/refs-and-the-dom.html

this.musicid = React.createRef();  

。。。。

if(this.state.music===true)   this.musicid.current.pause();
  else this.musicid.current.play();

 

=======================

代码如下：

import React from 'react'
//import ReactHowler from 'react-howler'
 

class Music extends React.Component {

  constructor(props){
    super(props);
    this.state = {         
         music:true,loop:true
    }

  
 
    this.music = this.music.bind(this); 
    this.playMusic = this.playMusic.bind(this); 

    this.musicid = React.createRef();
    

}
 
 

componentDidMount() {
 // this.timerID = setTimeout(
  //  () => this.tick(),
  //  3000
 // );
 document.addEventListener("WeixinJSBridgeReady",this.playMusic,false);

 
}

 
playMusic() {
  //alert(3)
  this.setState({
      music: true
  });

  this.musicid.current.play();
 
 // alert('wx:'+this.state.music)

} 

 

music(){

 // const audioid = ReactDOM.findDOMNode(this.refs.music); 
  
    this.setState(prevState => ({
           music: !prevState.music 

          }));

           
         if(this.state.music===true)   this.musicid.current.pause();
         else this.musicid.current.play();

          
}

 //-------------------

 
    render() {
      var musicimg = '';
        if(this.state.music)   musicimg = require('../../images/music.png')
        else   musicimg = require('../../images/musicoff.png')
        
 const audioUrl = require('../../images/media/music.mp3')
        
      return ( 
          <div> 

 
 

<audio  ref={this.musicid}  style={{display:`none`}} src={audioUrl} id="music" loop controls></audio>
          
            
               <div className={`  poa music`} onClick={this.music}>
                 <img className={`${this.state.music?'musicmove':''} imgwd100`}  src={musicimg} alt="" />
                 </div>

          </div>
      )

    }
  }

  export default Music

 

playMusic() {
  //alert(3)
  this.setState({
      music: true
  });

  this.musicid.current.play();
 
 // alert('wx:'+this.state.music)

}