How to create infographics with clickable audio?

Submitted by ahadley6 on Fri, 04/22/2022 - 18:39
Forums: 
Content creation

I´d like to create infographics with clickable audio like the following: https://www.profedeele.es/actividad/comidas-bebidas-a1/

 

I´ve tried the image hot spot, but it doesn´t seem as seemless as the link above. Any ideas would be appreciated!

 

Amanda

villon's picture

villon

Sat, 04/23/2022 - 16:04

Hello Amanda,

I think there is no way to do what you want with h5p. You have to edit a html site by yourselve like in this example and save it as "example.html"   Of course you can refine and layout the whole thing with css. I haven't included the picture and the mp3, you can do that yourself.

Greetings villon

Source:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="generator" content="Bluefish 2.2.11" >
<meta name="author" content="villon" >
<meta name="date" content="2022-04-23T15:29:23+0200" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
</head>
<body>
<script>
var audio = new Audio("audio_1.mp3 ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="1.png" onclick="audio.play ( )">
<script>
var audio = new Audio("audio_1.mp3 ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="1.png" onclick="audio.play ( )">
</body>
</html></head>
</html>