0 votes
by (140 points)

Hello, I am working with a sound library and I am getting an error message about this code. I am trying to add a sound effect on hover.

   <img src=https://i.pinimg.com/564x/5f/a5/37/5fa537f8d322b8b2e15749cf72c6fa14.jpg onmouseover="src='https://static.wixstatic.com/media/91a947_da703cd4e99a494dbcbcbea30147ac6d~mv2.gif';A.newTrack('start', 'http://blog.ocad.ca/wordpress/digf6037-fw201702-01/files/2019/03/start.mp3');A.newTrack('start').play();" style="max-width: 380px;margin-top:-40px; cursor: pointer;">


1 Answer

0 votes
by (159k points)

note: When a third-party library is required to run a code example please inlcude a link in your question to where that library can be downloaded, this saves the answerers from having to workout which library you mean. Based on the name of method call in your example I will assume you are using Harlowe Audio Lib.

There are a number of potential issues with your example:

1. As shown in the audio lib's documentation tracks should be defined within your project's startup tagged special passage.

	A.newTrack('start', 'http://blog.ocad.ca/wordpress/digf6037-fw201702-01/files/2019/03/start.mp3')

2. The String value of your img element's src attribute should be quoted.

3. The JavaScript reference of the img element's src attribute found that element's onmouseover attribute should include this to make if clear exactly which instance of src is being referenced.

4. As explained within the Track Methods section of the audio lib's documentation the <track>.play() function should be called on a track object, which you can obtain via the A.track() function.


So based on the above your example should look something like the following

<img src="https://i.pinimg.com/564x/5f/a5/37/5fa537f8d322b8b2e15749cf72c6fa14.jpg" style="max-width: 380px;margin-top:-40px; cursor: pointer;" onmouseover="this.src='https://static.wixstatic.com/media/91a947_da703cd4e99a494dbcbcbea30147ac6d~mv2.gif'; A.track('start').play();">

1. The security system of some modern web-browser (especially those used on mobile devices) now require that the end-user interacts with the web-page (clicks on a link or button) before the web-browser will allow media files to autoplay, this restriction's purpose is to stop ads from autoplay media.

This means that media (including that references via mouseover events) may not autoplay on the first Passage shown to the end-user, which is why we suggest making the first Passage of a some sort of splash / credits / welcome screen.

2. Downloading a file from a remote source takes time so there may be a delay between when you want an audio track to play when the track actually starts playing the first time a specific file is referenced. You may want to read the preload related sections of the audio lib's documentation.

by (140 points)
Fantastic!!!! thanks a lot! once again, you're saving me :)