question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

.seek() returning Howler object

See original GitHub issue

This is the code I’m working with:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setPosition } from '../Store';
import ReactHowler from 'react-howler';

class Audio extends Component {
  player = React.createRef();

  componentDidMount(){
    window.requestAnimationFrame(this.getPosition);
  }

  componentDidUpdate(){
    if(this.props.audioPlaying){
      window.requestAnimationFrame(this.getPosition);
    }
  }

  getPosition = () => {
    console.log(this.player.howler.seek());
    //this.props.dispatch(setPosition(this.player.howler));
    if(this.props.audioPlaying){
      window.requestAnimationFrame(this.getPosition);
    }
  }

  render () {
    return (
      <ReactHowler ref={(ref) => (this.player = ref)} src="/assets/uniin.mp3" playing={this.props.audioPlaying} />
    );
  }
}

const mapStateToProps = (state) => ({ ...state.audioPlayer });

export default connect(mapStateToProps)(Audio);

Logged to the console is: Howl {_orientation: Array(3), _stereo: null, _pos: null, _pannerAttr: {…}, _onstereo: Array(0), …}

Am I doing something wrong? I’m following the docs as far as I can tell…

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7

github_iconTop GitHub Comments

2reactions
Tobskacommented, May 3, 2019

This is weird because it still returns the said object even when the .howlerState() is ‘loaded’.

2reactions
SebastianGerScommented, Feb 18, 2019

Ok so I looked in to it a bit more and it seam like it’s happening in 3.7.3 aswell. I experienced it now after upgrading to 3.7.4 but when I think about it i probably did experience it when I first started to use it as well I just worked around it (but obviously not entirely). When downgrading to 3.7.3 the problem persists it’s only that i’m not experiencing it in all circumstances.

The problem seams to occur when I try to change src before the previous src has been loaded (and I’m saving the position(seek) of howler in localstorage when the src is changed (as long as seek is not 0). I guess the easiest way for me to remedy this is just to also check that seek does not return a object before trying to save the position.

Anyway this seams to confirm what you are saying @Stenerson that seek returns the howler object when the sound is not loaded.

Read more comments on GitHub >

github_iconTop Results From Across the Web

seek() returning howler object unexpectedly #1189 - GitHub
If the seek() function is called while audio is loaded, except the play lock is true , it will return the howler object...
Read more >
How to Implement Seek Function With Howler JS
I am trying to implement the seek() function using howler.js, but I can't figure out how to implement it. I'm a novice javascript...
Read more >
Howl class - howler library - Dart API - Pub.dev
Get the seek position of a sound. This method can optionally take 0, 1 or 2 arguments. getSeek() -> Returns the first sound...
Read more >
Howler.js - JavaScripting
Stop all sounds and reset their seek position to the beginning. codecs(ext). Check supported audio codecs. Returns true if the codec is supported...
Read more >
howler/CHANGELOG.md - UNPKG
- `FIXED` Error when calling `seek()` on audio that hasn't loaded ([#1423](https://github.com/goldfire/howler.js/pull/1423)).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found