Wavesurfer.js: Cannot Read Property Canvas of Undefined

  • emilykellymfr

    (@emilykellymfr)


    8 years, 2 months ago

    Recently, the podcast player on my company’s website has not been working on the site for all of our archived shows. When the play button is clicked on the audio player, nothing happens; the shows will not play. While using Chrome and Firefox, if the button is clicked 3-4 times the show will start playing. But with Microsoft Edge, the show never plays.

    While trying to investigate why the audio won’t play upon the first several clicks, I was using Chrome’s developer tools. When clicking the play button, the following error displays in the “Console” window:

    Uncaught TypeError: Cannot read property ‘canvas’ of undefined
    at Object.updateDimensions (wavesurfer.js:2064)
    at Object.updateSize (wavesurfer.js:2014)
    at Object.setWidth (wavesurfer.js:1686)
    at Object.empty (wavesurfer.js:604)
    at Object.load (wavesurfer.js:412)
    at (index):422
    at wavesurfer.js:795
    at Array.forEach (<anonymous>)
    at Object.fireEvent (wavesurfer.js:794)
    at wavesurfer.js:144

    Every discussion of this error that I have found seems to be easily fixable by editing the HTML document of the website using Wavesurfer, by including the .js file in a certain way. However, my website does not use the Wavesurfer.js file; it is not on the server anywhere. However, Wavesurfer is being called each time the page loads from its source on Cloudflare. (<script type=’text/javascript’ src=’//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js?ver%5B0%5D=jquery’></script>)

    Does the default audio player for WordPress use the Wavesurfer framework? If so, how do I fix the above error if I can neither edit the dynamically created page HTML or edit the Wavesurfer.js file since it is not on our server?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • helldog2018

    (@helldog2018)

    8 years, 2 months ago

    Hi @emilykellymfr,

    I believe you are using the plug-in Wavesurfer-WP, and I believe this plug-in is calling for the wavesurfer query on Cloudflare.
    After disabling this plug-in, can you test again?

    And once you know where the fault is (but you still need the plug-in), then you know where to edit the files.

    Good luck.

    Thread Starter emilykellymfr

    (@emilykellymfr)

    8 years, 2 months ago

    Thanks for your reply @helldog2018! However, I actually do not have that particular plugin installed on our site; that is why I am super confused as to why Wavesurfer is being called. I do, however, have the plugin Seriously Simple Podcasting for the site. I have tried contacting the developer about this issue, but have not gotten any helpful responses.
    I have looked through all of the files utilized by the Seriously Simple Podcasting plugin, but none of them call Wavesurfer.js (that I can tell, but I am not super experienced with this matter). Does that plugin use Wavesurfer? If it does, how would I go about fixing this error?

    • This reply was modified 8 years, 2 months ago by emilykellymfr.
    helldog2018

    (@helldog2018)

    8 years, 2 months ago

    Hi,

    I could have sworn there was a plugin url to the one I mentioned before, anyway that doesn’t show anymore.

    The query is being called on every page, so my best bet is in the header.php or functions.php of your theme.

    Let me know if the query is there.

    Thread Starter emilykellymfr

    (@emilykellymfr)

    8 years, 2 months ago

    Hi,

    I just searched the header and function files and neither seems to reference it. Also, I should have mentioned that I did have that plugin installed, but the problem was present before I installed the plugin. I honestly installed it to see if that would affect the issue at all, which it didn’t. It is back to be deactivated, since it didn’t change the problem either way.

    I am guessing that the issue has something to do with the Seriously Simple Podcasting plugin, but I do not want to deactivate that because it is the heart of our website.

    Currently, I am thinking about updating the theme again because that provided a temporary fix a few weeks ago when this play button issue previously presented. Fixing this issue was the first assignment I received when I started the webmaster position I am in now, so I do not know when this issue originally presented or what may have caused it.

    I do not know if you know anything about the podcasting plugin, but any other ideas you have on this topic would be much appreciated!

    Thank you!

    helldog2018

    (@helldog2018)

    8 years, 2 months ago

    Hi @emilykellymfr,

    I just tested the plugin Seriously Simple Podcast and yes indeed this wavesurfer.js is being called by this plug-in.
    To disable this javascript entirely without disabling the plug-in you have to add the following code into functions.php of your theme: 

    add_action( 'wp_head', 'remove_whole_wavesurfer' );
function remove_whole_wavesurfer(){
remove_action('wp_enqueue_scripts', 'ssp_enqueue_wave_surfer');
}

    If you want to disable this JavaScript only for certain pages, let me know,therefore we should edit the code a bit.

    • This reply was modified 8 years, 2 months ago by helldog2018.
    • This reply was modified 8 years, 2 months ago by helldog2018.
    Thread Starter emilykellymfr

    (@emilykellymfr)

    8 years, 2 months ago

    Alright, I added that snippet to my functions.php file, yet it doesn’t seem to have changed anything. When I try to play podcasts, I still get the same error.

    For now, I am just working on building a child theme so that I can update the site’s theme. When I updated the theme a few weeks ago, that temporarily fixed the issue, so maybe it will fix the issue again.

    Thanks again for all of your help!

    EDIT: Alright, so I just found the call to wavesurfer.js in Seriously Simple Podcasting’s class-ss-frontend.php. Out of curiosity, I changed the version number in the call to the wavesurfer.js source code to 2.0.5 which is the most current version of wavesurfer.js. Making this change made it so that nothing happened when the play button was pressed. Not exactly what I wanted, but I thought I’d try it since I have seen in other forums that the version number had created problems before.

    Interestingly, if I revert the version number in that particular line back to 1.2.8, the button works. Hmmm… I am not sure what to think of this. What are your thoughts?

    • This reply was modified 8 years, 2 months ago by emilykellymfr.
    helldog2018

    (@helldog2018)

    8 years, 2 months ago

    Hi @emilykellymfr,

    I am happy it is solved by changing the version number of your javascript file. Also, might this not be a caching problem? Did you clear your own cache before attempting this?

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Wavesurfer.js: Cannot Read Property Canvas of Undefined’ is closed to new replies.