Play sounds on <a> using howler.js

[Meddysong]

I noticed that the suite was using howler.js. That ties in nicely with something I'm working on.

What I want to do is create something like this, where certain words play an audio file when clicked.

I wasn't able to replicate it so thought I'd try something similar in CodePen. Here's my pen. As you can see, I've got it working there, though rather inefficiently. That won't be a problem; once this page is written, I won't have to update it.

Where I always fail is trying to get something I've done elsewhere working within IC. The problem is that I just don't really understand what the suite expects of me.

I've created the page. I've put my compiled JS into a file and called it as a page object. I've even amended the JS slightly in the way that I've had to with other similar cases. By that, I mean that

(function() {

became

;(function() {

and I changed the ending from 

}).call(this);

to

}).call(this);(jQuery, _));

})(jQuery, _));

and other iterations.

I've always had problems with using resources which involve JS and which work well elsewhere within IC. I think it boils down to simply not knowing what changes are required within IC. Usually I get through it with brute force but it's just not working for me today.

Does anybody have any ideas what I should do?

[newbie LAC]

HTML

<div class="container title" data-controller="pages.front.audio.main">
	<h2 class="dashed-title title">Audio Test<span class="title--tag">Clicking a link should play the word</span></h2>
	<div class="container">
		<p>You may quite like words like <a data-sound="domain.tld/sounds/da_ic.mp3">da</a> and <a data-sound="domain.tld/sounds/uniformo_ic.mp3">uniformo</a>, which are very pleasant. <a data-sound="domain.tld/sounds/jaro_ic.mp3">Jaro</a> is quite nice, though contains an r.</p>
		<p>If you fancy some length, then <a data-sound="domain.tld/sounds/maksimumo_ic.mp3">maksimumo</a> might be right up your alley!</p>
	</div>
</div>

JS

;( function($, _, undefined){
	"use strict";

	ips.controller.register('pages.front.audio.main', {

		initialize: function () {
			this.on('click', '[data-sound]', this.playSound);
		},

		playSound: function (e) {
			e.preventDefault();

          	new Howl({
			    src: $(e.currentTarget).attr('data-sound'),
			    html5: true
 			})
				.play();
		}
	});
}(jQuery, _));

In this case you will only edit html

Just add data-sound="%url_to_audio_file%" to tag

[Meddysong]

Thank you, @newbie LAC! I knew there would be a more efficient way using a data-attribute but didn't know what it should look like. Thank you for finding it for me.

Unfortunately, it's not working 😞

Here's my HTML:

<section class="sTertiary u-padding-top-small u-padding-bottom-large u-no-margin-top u-no-margin-bottom">
	<div class="container title" data-controller="pages.front.audio.main">
    	<h2 class="dashed-title title">Audio Test<span class="title--tag">Clicking a link should play the word</span></h2>
		<div class="container">
			<p>You may quite like words like <a data-sound="//s3-eu-west-1.amazonaws.com/eab-site-resources/pages_media/23_da.mp3">da</a> and <a data-sound="//s3-eu-west-1.amazonaws.com/eab-site-resources/pages_media/23_uniformo.mp3">uniformo</a>, which are very pleasant. <a data-sound="//s3-eu-west-1.amazonaws.com/eab-site-resources/pages_media/23_jaro.mp3">Jaro</a> is quite nice, though contains an r.</p>
			<p>If you fancy some length, then <a data-sound="//s3-eu-west-1.amazonaws.com/eab-site-resources/pages_media/23_maksimumo.mp3">maksimumo</a> might be right up your alley!</p>
		</div>
	</div>  
</section>

So I've added the data-controller and data-sound attributes, and I've confirmed that the URLs link to functioning MP3 recordings. My page uses the IPS page wrapper and is downloading the site's JS files. Do you have any idea what could be wrong?

[newbie LAC]

Updated

[Meddysong]

48 minutes ago, newbie LAC said:

Updated

I'm sorry, I can't see what the difference in the HTML is. I've copied yours (editing the URLs) and it still isn't working.

Just to check: the JS is already part of the suite, isn't it? I don't need to add that as a page object?

[newbie LAC]

I've updated js

[Meddysong]

1 minute ago, Meddysong said:

Just to check: the JS is already part of the suite, isn't it? I don't need to add that as a page object?

Got it working. It turns out I do need to add the JS!

Sorry, @newbie LAC: I thought you were quoting some existing JS. Thank you for your help!