Javascript 反应+；Rails音频流问题_Javascript_Ruby On Rails_Reactjs_Erb

Javascript 反应+；Rails音频流问题

javascript ruby-on-rails reactjs

Javascript 反应+；Rails音频流问题,javascript,ruby-on-rails,reactjs,erb,Javascript,Ruby On Rails,Reactjs,Erb,我将学习本教程：我已经完成了所有步骤，但无法让播放器正确显示以下是我的音频模型的内容： [1] pry(main)> Audio.all Audio Load (0.5ms) SELECT "audios".* FROM "audios" => [#<Audio:0x007fc922b91a20 id: 1, created_at: Mon, 16 Oct 2017 22:20:58 UTC +00:00, updated_at: Mon, 16 Oct

我将学习本教程：

我已经完成了所有步骤，但无法让播放器正确显示

以下是我的音频模型的内容：

[1] pry(main)> Audio.all
  Audio Load (0.5ms)  SELECT "audios".* FROM "audios"
=> [#<Audio:0x007fc922b91a20
  id: 1,
  created_at: Mon, 16 Oct 2017 22:20:58 UTC +00:00,
  updated_at: Mon, 16 Oct 2017 22:20:58 UTC +00:00,
  name: "Vibe - 6_8_17, 1.33 AM.m4a",
  path: "app/assets/audio/Vibe - 6_8_17, 1.33 AM.m4a">]

你在使用

react rails

gem吗？@bunhouth是的。你的项目在公共github上吗？你可以通过使用{prerender:true}````使它工作，我不确定为什么它还没有在客户端渲染。我以前从未遇到过这个问题。我来看看，我发现问题了。只需删除

https://code.jquery.com/jquery-3.2.1.min.js

来自application.html.erb。最好使用gem。你在使用

react rails

gem吗？@bunhouth是的。你的项目在公共github上吗？你可以使用{prerender:true}````使它工作。我不确定为什么它还没有在客户端渲染。我以前从未遇到过这个问题。我来看看，我发现问题了。只需删除

https://code.jquery.com/jquery-3.2.1.min.js

来自application.html.erb。最好用宝石。

<p id="notice"><%= notice %></p>

<%= react_component 'Audio', id: @audio.id, action: controller_name, audio: @audio %>

<%= link_to 'Edit', edit_audio_path(@audio) %> |
<%= link_to 'Back', audios_path %>

<head>
  <title><%= content_for?(:title) ? yield(:title) : "Spliff Productions" %></title>
    <%= csrf_meta_tags %>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>

var Audio = React.createClass({

  getInitialState: function() {
    return {
      player: false
    }
  },

  componentDidMount: function() {
    var $player = $('#' + this.props.id);

    /**
      * Have to add media event listeners here.
      *
    */
    $player.on('play', (e) => {
      e.preventDefault();
      this.playLocation();
    });

    $player.on('pause', (e) => {
      e.preventDefault();
      this.pause();
    });

    $player.on('ended', (e) => {
      e.preventDefault();
      this.ended();
    });

    $(document).on('keydown', (e) => {
      // Move currentTime forward and backward via arrow keys and play/pause via spacebar.
      if (e.keyCode == 39) {
        this.state.player.currentTime += 1;
      } else if (e.keyCode == 37) {
        this.state.player.currentTime -= 1;
      } else if (e.keyCode == 32 && this.state.player.paused == true) {
        e.preventDefault();
        this.state.player.play();
      }  else if (e.keyCode == 32 && this.state.player.paused == false) {
        e.preventDefault();
        this.state.player.pause()
      }
    });

    $player.on('wheel', (e) => {
      e.preventDefault();
      e.stopPropagation();
      // $player.focus();
      if (e.originalEvent.wheelDelta > 0) {
        this.state.player.currentTime += 1;
      } else {
        this.state.player.currentTime -= 1;
      }
    });
  },

  componentWillUnmount: function() {
    var $player = $('#' + this.props.id);
    $player.off('play');
    $player.off('pause');
    $(document).off('keydown')
    $player.off('wheel')
  },

  getPlaybackTime: function(time) {
    var hours = Math.floor(time / 3600);
    var minutes = Math.floor(time / 60);
    if (minutes > 59) {
      minutes = Math.floor(time / 60) - 60;
    }

    var seconds = Math.round(time - minutes * 60);
    if (seconds > 3599) {
      seconds = Math.round(time - minutes * 60) - 3600;
    }

    return time;
  },

  playLocation: function() {
    this.setState({player: $('#' + this.props.id)[0]}, function() {
      var playbackTime = this.getPlaybackTime(this.state.player.currentTime);

      $.get('/audios/' + this.props.id + '.json').then( (data) => {
        this.state.player.currentTime = data.playback_time;
        this.state.player.play();
      });
    });
  },

  pause: function() {
    var playbackTime = this.getPlaybackTime(this.state.player.currentTime);

    // Do the putting.
    $.ajax({
      url: '/audios/' + this.props.id  + '.json',
      method: 'put',
      data: 'audio[playback_time]=' + playbackTime
    });
  },

  ended: function() {
    // Set playback_time to 0.
    $.ajax({
      url: '/audios/' + this.props.id  + '.json',
      method: 'put',
      data: 'audio[playback_time]=' + 0
    });

    $(document).trigger('playback-ended');
  },

  render: function() {
    return <audio id={this.props.id} controls className="player" preload="false">
      <source src={this.props.audio.path.indexOf('http') ? '/stream/' + this.props.id : this.props.audio.path} />
    </audio>
  }
});