83 lines
3.0 KiB
HTML
83 lines
3.0 KiB
HTML
{% load static %}
|
||
<div class="activities">
|
||
<div class="activities__header">
|
||
<h2>Audio Bacaan</h2>
|
||
</div>
|
||
|
||
{% for bacaan in bacaans %}
|
||
<div class="activities__box">
|
||
<!-- <div class="activities__boxHeader roomListRoom__header"> -->
|
||
<!-- <a href="profile.html" class="roomListRoom__author"> -->
|
||
<!-- <div class="avatar avatar--small"> -->
|
||
<!-- <img src="https://randomuser.me/api/portraits/women/11.jpg" /> -->
|
||
<!-- </div> -->
|
||
<!-- <p> -->
|
||
<!-- @sulamita_ivy -->
|
||
<!-- <span>5 days ago</span> -->
|
||
<!-- </p> -->
|
||
<!-- </a> -->
|
||
<!-- <div class="roomListRoom__actions"> -->
|
||
<!-- <a href="#"> -->
|
||
<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> -->
|
||
<!-- <title>remove</title> -->
|
||
<!-- <path -->
|
||
<!-- d="M27.314 6.019l-1.333-1.333-9.98 9.981-9.981-9.981-1.333 1.333 9.981 9.981-9.981 9.98 1.333 1.333 9.981-9.98 9.98 9.98 1.333-1.333-9.98-9.98 9.98-9.981z" -->
|
||
<!-- ></path> -->
|
||
<!-- </svg> -->
|
||
<!-- </a> -->
|
||
<!-- </div> -->
|
||
<!-- </div> -->
|
||
<div class="">
|
||
<!-- <p>replied to post “<a href="room.html">100 Days of code challenge!</a>”</p> -->
|
||
<!-- <div class="activities__boxRoomContent"> -->
|
||
<!-- I’ll have to try this sometime. Really like this idea. Wanna talk about it? I ‘m.... -->
|
||
<!-- </div> -->
|
||
<img src="{% static 'images/' %}{{bacaan.image_url}}" style="height: 70px;" >
|
||
<center><p class="btn rounded-0" onclick="playAudioActivity('{{bacaan.judul_bacaan}}')">Dengarkan <i id="i_activity_{{bacaan.judul_bacaan}}" class="fa fa-play-circle"></i></p></center>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
<script>
|
||
var name_audio = null;
|
||
function playAudioActivity(id) {
|
||
if (name_audio == null) {
|
||
let audio = document.getElementById("myAudio_"+id);
|
||
audio.play();
|
||
name_audio = id;
|
||
document.getElementById("i_activity_"+id).setAttribute("class", "fa fa-pause-circle");
|
||
}else{
|
||
let audio_playing = document.getElementById("myAudio_"+name_audio);
|
||
document.getElementById("i_activity_"+name_audio).setAttribute("class", "fa fa-play-circle");
|
||
document.getElementById("i_activity_"+id).setAttribute("class", "fa fa-pause-circle");
|
||
if(audio_playing.ended == false){
|
||
audio_playing.pause();
|
||
audio_playing.currentTime = 0;
|
||
let audio = document.getElementById("myAudio_"+id);
|
||
audio.play();
|
||
|
||
}else{
|
||
let audio = document.getElementById("myAudio_"+id);
|
||
audio.play();
|
||
}
|
||
name_audio = id;
|
||
|
||
}
|
||
|
||
//sleep 3 second
|
||
setTimeout(function(){
|
||
document.getElementById("i_activity_"+name_audio).setAttribute("class", "fa fa-play-circle");
|
||
}, 5000);
|
||
// if audio is playing in other audio tag, stop it else play it
|
||
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
</div> |