Can anyone help me with this error?

Question

i have embedded soundcloud audio in my html page through iframe. It works fine in system, but gives error when I load this page in smartphone.

error: Uncaught invalid state error: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

https://code.sololearn.com/W2U1DUVf0mZf/?ref=app

Answer 1

yes audio is like img and you need to use src to point to an audio file on an internet drive.

Answer 2

Gordon Chan Thanks for the guidence.

Answer 3

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/345633997&amp;auto_play=true&amp;color=ff5500"></iframe>

Replace your iframe with above code
There are two problems with your current version (and idea)
Firstly, display being none is why the console error returns undrawable due to zero canvas.
Secondly, if you put in new iframe code width and height being 0 percent, the user cannot choose play in app vs play in browser in the server ui, so the sound will never be played.
Conclusion, this ui must take up user view to work, so if you want to stick to your original design, you need to find the sound file e.g. mp3 and play with audio tag

Answer 4

Thanks for the answer Gordon Chan but here I cannot add mp3 audio from my system. I believe I need to update it from my gdrive and then acess here through JS.