Listen To This Article Feature

[Chris027]

Hi Guys, I'd absolutely love a feature that enabled me to upload an audio file of an article being read aloud, and have a button people could click to "Listen to this Article."

The magazine The Atlantic makes great use of this feature. Please ignore the content of the link, I'm only linking to it as an example of what I'd love to be part of Invision Community for front page articles I write. 

https://www.theatlantic.com/magazine/archive/2022/05/social-media-democracy-trust-babel/629369/

 

[Nathan Explosion]

1. Record your audio
2. Upload the file via the Editor
3. Click the file
4. Type "Listen to this article" above it/below it
5. Add the rest of your content.

The result:

Listen to this article

 

 

This audio file contains my voice.

 

 

 

 

[Chris027]

Genius.

[SeNioR-]

CTRL+SHIFT+U in your browser 😉 

[Chris027]

Hi Guys, I finally uploaded some audio after using a text to speech app. 

Question: How can I disable the popup / tool tip that shows how many times it has been downloaded? I noticed this isn't seen int he audio posted above by @Nathan Explosion.

 

Here's what it looks like on my site when I mouse over it.

 

[Nathan Explosion]

Link to the article...let people look at the HTML.

[Chris027]

3 minutes ago, Nathan Explosion said:

Link to the article...let people look at the HTML.

Sure thing.

 

https://audiophilestyle.com/ca/immersive/immersive-music-and-some-current-favorites-part-4 -r1168/

 

[Nathan Explosion]

Tagging @Daniel F for his opinion on this one - I believe that may be something that may need to be changed by Invision

It appears to be added by this block of code in ips.core.lightboxedImages.js

} else {
	// This is an INLINE attachment
	attachment.addClass('ipsAttachLink_inline');
	attachment.attr('title', ips.getString('attachmentPending'));
	attachment.attr('data-ipstooltip', true);
}

Earlier in the function, however, it states:

var attachments = this.scope.find('[data-fileid]').not( function (idx, elem) {
	// We don't want to change any image/video attachments, so exclude those here
	var elem = $(elem);
	return elem.is('img, source, video') || elem.find('img, source, video').length;
});

Maybe audio also needs to be added there here too (seeing as you are excluding video/source)

var attachments = this.scope.find('[data-fileid]').not( function (idx, elem) {
	// We don't want to change any image/video attachments, so exclude those here
	var elem = $(elem);
	return elem.is('img, source, video, audio') || elem.find('img, source, video, audio').length;
});

It might be possible to reverse the above using some JS in a plugin.

 

 

[Chris027]

Do you think it's possible to hide with simple css in my custom.css file?

[Nathan Explosion]

Doubt it.

[Chris027]

I got rid of it by changing the location of the uploaded file. I uploaded it via sftp, then pointed the audio src to that URL. 

[Daniel F]

14 hours ago, Nathan Explosion said:

Tagging @Daniel F for his opinion on this one - I believe that may be something that may need to be changed by Invision

It appears to be added by this block of code in ips.core.lightboxedImages.js

} else {
	// This is an INLINE attachment
	attachment.addClass('ipsAttachLink_inline');
	attachment.attr('title', ips.getString('attachmentPending'));
	attachment.attr('data-ipstooltip', true);
}

Earlier in the function, however, it states:

var attachments = this.scope.find('[data-fileid]').not( function (idx, elem) {
	// We don't want to change any image/video attachments, so exclude those here
	var elem = $(elem);
	return elem.is('img, source, video') || elem.find('img, source, video').length;
});

Maybe audio also needs to be added there here too (seeing as you are excluding video/source)

var attachments = this.scope.find('[data-fileid]').not( function (idx, elem) {
	// We don't want to change any image/video attachments, so exclude those here
	var elem = $(elem);
	return elem.is('img, source, video, audio') || elem.find('img, source, video, audio').length;
});

It might be possible to reverse the above using some JS in a plugin.

 

 

Seems reasonable! I have posted this to our internal tracker.