{"id":377,"date":"2012-11-27T00:08:36","date_gmt":"2012-11-27T00:08:36","guid":{"rendered":"http:\/\/bienvenueafricains.com\/en\/?p=377"},"modified":"2019-11-03T23:47:28","modified_gmt":"2019-11-03T23:47:28","slug":"new-testament-jula","status":"publish","type":"page","link":"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/","title":{"rendered":"Audio New Testament in Jula"},"content":{"rendered":"<h2 class=\"wp-block-heading\"><strong>The New Testament (Injil)<\/strong><\/h2>\n<p>The New Testament (Injil) is a collection of 27 books which forms the second, briefer section of the Christian Bible. Unlike the Old Testament (Tawrat and Zabur) which was written over many centuries, the New Testament was written over a span of 100 years, and most of it within a couple of decades. The books are not arranged in the order that they were written, but rather by subject matter and type. The New Testament reveals the message of God through Jesus, the spread of the church, and spiritual guidance for those following God on His path.<\/p>\n<h2>Listen to the New Testament in Jula<\/h2>\n<p><a href=\"http:\/\/bienvenueafricains.com\/mp3\/jula\/AudioNT\/JulaAudioNT.zip\">Download all files<\/a><\/p>\n<!DOCTYPE html>\r\n<html>\r\n  <style>\r\n    * {\r\n      margin: 0;\r\n      font-family: Arial, Helvetica, sans-serif;\r\n      box-sizing: border-box;\r\n    }\r\n    .container {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n    }\r\n\r\n    \/*NAVBAR*\/\r\n\r\n    #navbar {\r\n      position: -webkit-sticky;\r\n      position: sticky;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 40px;\r\n      display: flex;\r\n      justify-content: space-around;\r\n      align-items: center;\r\n      background-color: #d11b21;\r\n      color: white;\r\n    }\r\n    #player {\r\n      flex-basis: 50%;\r\n    }\r\n    #text-selectors, #audio-player {\r\n      display: flex;\r\n      flex-flow: row;\r\n      justify-content: space-around;\r\n      flex-basis: 50%;\r\n      align-content: center;\r\n    }\r\n\r\n    \/*Audio Player*\/\r\n\r\n    #barAndTime {\r\n      display: flex;\r\n      flex-basis: 30%;\r\n      flex-flow: column;\r\n      justify-content: center;\r\n    }\r\n    .progress {\r\n      display: flex;\r\n      height: 8.4px;\r\n      transition: height 0.3s;\r\n      background: #422919;\r\n      cursor: pointer;\r\n    }\r\n    .progressFiller {\r\n      width: 50%;\r\n      background: #f9e93d;\r\n      flex: 0;\r\n      flex-basis: 0.5%;\r\n      z-index: 1;\r\n    }\r\n    .runtime {\r\n      display: flex;\r\n      justify-content: space-between;\r\n    }\r\n    .runtime p {\r\n      margin: 0px;\r\n    }\r\n    .inputs {\r\n      display: flex;\r\n      flex-basis: 20%;\r\n      flex-flow: row;\r\n      justify-content: center;\r\n    }\r\n    .volume {\r\n      display: flex;\r\n      align-self: center;\r\n    }\r\n    input[type=range] {\r\n      -webkit-appearance: none;\r\n      background: transparent;\r\n      width: 50%;\r\n      margin: 0 5px;\r\n      display: flex;\r\n      flex-basis: 50%;\r\n      align-self: center;\r\n    }\r\n    input[type=range]:focus {\r\n      outline: none;\r\n    }\r\n    input[type=range]::-webkit-slider-runnable-track {\r\n      width: 100%;\r\n      height: 5px;\r\n      cursor: pointer;\r\n      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);\r\n      background: rgba(255,255,255,0.8);\r\n      border-radius: 1.3px;\r\n      border: 0.2px solid rgba(1, 1, 1, 0);\r\n    }\r\n    input[type=range]::-webkit-slider-thumb {\r\n      height: 12px;\r\n      width: 12px;\r\n      border-radius: 50px;\r\n      background: #f9e93d;\r\n      cursor: pointer;\r\n      -webkit-appearance: none;\r\n      margin-top: -3.5px;\r\n      box-shadow:0 0 2px rgba(0,0,0,0.2);\r\n    }\r\n    input[type=range]::-moz-range-track {\r\n      width: 100%;\r\n      height: 5px;\r\n      cursor: pointer;\r\n      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);\r\n      background: #ffffff;\r\n      border-radius: 1.3px;\r\n      border: 0.2px solid rgba(1, 1, 1, 0);\r\n    }\r\n    input[type=range]::-moz-range-thumb {\r\n      box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);\r\n      height: 12px;\r\n      width: 12px;\r\n      border-radius: 50px;\r\n      background: #f9e93d;\r\n      cursor: pointer;\r\n    }\r\n\r\n    \/*Book and Chapter Selectors*\/\r\n\r\n    #h1 {\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n    #book, #chapter, .runtime {\r\n      color: white;\r\n    }\r\n    #book, #chapter {\r\n      padding: 6px;\r\n    }\r\n    .dropdown, .dropdownCH{\r\n      position: relative;\r\n      display: inline-block;\r\n    }\r\n    .dropdown-content, .dropdown-contentCH{\r\n      display: none;\r\n      position: absolute;\r\n      background-color: #f9f9f9;\r\n      min-width: 160px;\r\n      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\r\n      z-index: 1;\r\n    }\r\n    .dropdown-content a, .dropdown-contentCH a{\r\n      color: black;\r\n      padding: 12px 16px;\r\n      text-decoration: none;\r\n      display: block;\r\n    }\r\n    .dropdown-content a:hover, .dropdown-contentCH a:hover{\r\n      background-color: #f1f1f1;\r\n    }\r\n    .dropdown:hover .dropdown-content, .dropdownCH:hover .dropdown-contentCH{\r\n      display: block;\r\n      max-height: 250px;\r\n      overflow: auto;\r\n    }\r\n    #buttons, .btn {\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      border: 0 none;\r\n      border-radius: 4px;\r\n      text-decoration: none;\r\n      outline: none;\r\n    }\r\n    .btn {\r\n      box-shadow: 0 2px #999;\r\n      background-color: white;\r\n    }\r\n    .btn:active {\r\n      box-shadow: 0 0;\r\n      transform: translateY(2px);\r\n    }\r\n    \r\n    \/*TEXT READER*\/\r\n\r\n    .section {\r\n      display: flex;\r\n      justify-content: center;\r\n      margin-top: 50px;\r\n    }\r\n    #paragraph {\r\n      display: flex;\r\n      flex-basis: 100%;\r\n      line-height: 1.8;\r\n      font-size: 16px;\r\n      flex-wrap: wrap;\r\n      flex-direction: column;\r\n      display: inline;\r\n    }\r\n    .sidebar {\r\n      display: flex;\r\n      flex-direction: column;\r\n      flex-basis: 10%;\r\n    }\r\n    span {\r\n      display: inline;\r\n      overflow-wrap: normal;\r\n    }\r\n    .right-align {\r\n      text-align: right;\r\n    }\r\n    .highlight {\r\n      background-color: #f9e93d;\r\n    }\r\n    .highlight2 {\r\n      color: white;\r\n      z-index: 1;\r\n    }\r\n    .clickMe {\r\n      cursor: pointer;\r\n    }\r\n\r\n    \/*Share Button*\/\r\n\r\n    #side_button {\r\n      align-self: center;\r\n      position: -webkit-sticky;\r\n      position: -moz-sticky;\r\n      position: -ms-sticky;\r\n      position: -o-sticky;\r\n      position: sticky;\r\n      top: 100px;\r\n      right: 100px;\r\n      display: inline-block;\r\n      background: #1e9544;\r\n      padding: 40px;\r\n      border-radius: 50%;\r\n      height: 40px;\r\n      width: 40px;\r\n      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\r\n      z-index: 2;\r\n    }\r\n    #whatsApp {\r\n      position: absolute;\r\n      bottom: 16px;\r\n      left: 16px;\r\n    }\r\n    .show {\r\n      visibility: hidden;\r\n    }\r\n\r\n    \/*SCREEN SIZE*\/\r\n\r\n    @media (max-width: 1000px) {\r\n      #paragraph {\r\n        font-size: 14px;\r\n      }\r\n      #side_button {\r\n        right: 25px;\r\n        padding: 35px;\r\n        height: 35px;\r\n        width: 35px;\r\n      }\r\n      #whatsApp {\r\n        position: absolute;\r\n        top: 11px;\r\n        left: 11px;\r\n      }\r\n    }\r\n    @media (max-width: 800px) {\r\n      #navbar {\r\n        flex-wrap: wrap;\r\n        height: 80px;\r\n      }\r\n      #text-selectors, #player {\r\n        flex-basis: 100%;\r\n        align-content: space-around;\r\n      }\r\n      .section {\r\n        margin-top: 50px;\r\n      }\r\n      #paragraph {\r\n        font-size: 14px;\r\n      }\r\n      .sidebar {\r\n        flex-basis: 5%;\r\n      }\r\n      #side_button {\r\n        right: 10px;\r\n      }\r\n    }\r\n    @media (max-width: 501px) {\r\n      .inputs {\r\n        display: none;\r\n      }\r\n      .skip {\r\n        display: none;\r\n      }\r\n      #paragraph {\r\n        font-size: 14px;\r\n      }\r\n      .sidebar {\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-basis: 2.5%;\r\n      }\r\n      #side_button {\r\n        position: fixed;\r\n        bottom: 10px;\r\n        top: auto;\r\n        opacity: .75;\r\n      }\r\n    }\r\n  <\/style>\r\n  <div class=\"container\">\r\n    <nav id=\"navbar\">\r\n      <div id=\"player\">\r\n        <audio id=\"listener\" src=\"https:\/\/fcbhabdm.s3.amazonaws.com\/mp3audiobibles2\/ENGESVN2DA\/B03___01_Luke________ENGESVN2DA.mp3\"><\/audio>\r\n        <div id=\"audio-player\">\r\n            <button id=\"toggle\" class=\"btn\" title=\"Toggle Play\">\u25ba<\/button>\r\n            <div id=\"barAndTime\">\r\n              <div class=\"progress\">\r\n                <div class=\"progressFiller\"><\/div>\r\n              <\/div>\r\n              <div class=\"runtime\">\r\n                <p id=\"currentTime\">0:00<\/p>\r\n                <p id=\"duration\">0:00<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"inputs\">\r\n              <input type=\"range\" name=\"volume\" class=\"slider\" min=\"0\" max=\"1\" step=\"0.05\" value=\"1\">\r\n              <svg class=\"volume\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\">\r\n              <path class=\"volume__speaker\" fill=\"#f9e93d\" fill-rule=\"evenodd\" d=\"M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z\"><\/path>\r\n              <\/svg>\r\n            <\/div>\r\n            <button class=\"playSpeed btn\">1x<\/button>\r\n            <button class=\"btn skip\"data-skip=\"-15\" class=\"player__button\">\u00ab 15s<\/button>\r\n            <button class=\"btn skip\"data-skip=\"15\" class=\"player__button\">15s \u00bb<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div id=\"text-selectors\">\r\n        <div class=\"dropdown\">\r\n          <h1 id=\"h1\"><span id=\"book\" name=\"Luke\"><\/span> <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><path fill=\"#ffffff\" fill-rule=\"evenodd\" d=\"M5 8l4 4 4-4z\"><\/svg><\/h1>\r\n          <div class=\"dropdown-content\">\r\n            <a class=\"bookName\"><\/a>\r\n          <\/div>\r\n        <\/div>\r\n        <div id=\"buttons\">\r\n          <button id=\"reverseBtn\" class=\"btn\">\u00ab<\/button>\r\n          <div class=\"dropdownCH\">\r\n            <h2><span id=\"chapter\">1<\/span><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"><path fill=\"#ffffff\" fill-rule=\"evenodd\" d=\"M5 8l4 4 4-4z\"><\/svg><\/h2>\r\n            <div class=\"dropdown-contentCH\">\r\n              <a class=\"chapterId\"><\/a>\r\n            <\/div>\r\n          <\/div>\r\n          <button id=\"forwardBtn\" class=\"btn\">\u00bb<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/nav>\r\n    <section class=\"section\">\r\n      <div class=\"sidebar\"><\/div>\r\n      <p id=\"paragraph\"><\/p>\r\n      <div class=\"sidebar\">\r\n        <a id=\"side_button\" class=\"show\" target=\"_blank\">\r\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" id=\"whatsApp\"><path fill=\"#ffffff\" fill-rule=\"evenodd\" d=\"M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z\"><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n    <\/section>\r\n    \r\n  <\/div>\r\n  <script>\r\n    const state = {\r\n      key: 'd86cb0422d5e47df0b5c22e47879980e',\r\n      version: 'DYUWYI',\r\n      currentBook: 'Luke',\r\n      currentBookId: 'Luke',\r\n      currentChapter: 1,\r\n      books: {},\r\n      timestamps: [],\r\n    }\r\n\r\n    document.addEventListener('DOMContentLoaded', app);\r\n\r\n    async function app() {\r\n      const booksList = await fetchBooks(state.key, state.version);\r\n      const bookData = state.books[`${state.currentBookId}`];\r\n      const damId = bookData.dam_id;\r\n\r\n      navbar(damId, booksList, bookData);\r\n      text(damId);\r\n    }\r\n\r\n    const navbar = async (damId, booksList, bookData) => {\r\n      audioPlayer(damId);\r\n      selectors(booksList, bookData);\r\n    }\r\n\r\n    const text = async (damId) => {\r\n      const text = await fetchText(damId);\r\n\r\n      displayText(text);\r\n      handleTextClick();\r\n      handleTextHighlighting();\r\n    }\r\n\r\n    const audioPlayer = async (damId) => {\r\n      const audioData = await fetchAudio(damId);\r\n      state.timestamps = await fetchVerseTimestamps(damId);\r\n      const audio = document.querySelector('#listener');\r\n\r\n      setAudioSrc(audio, audioData);\r\n      handleAudioPlayerChange(audio);\r\n    }\r\n\r\n    const selectors = (booksList, bookData) => {\r\n      const { currentBookId, currentChapter } = state;\r\n\r\n      setCurrentBook(currentBookId);\r\n      setCurrentChapter(currentChapter);\r\n\r\n      displayBooks(booksList);\r\n      displayChapters(bookData);\r\n      handleChapterChange();\r\n    }\r\n\r\n    const displayText = (textArray) => {\r\n      const paragraph = document.querySelector('#paragraph');\r\n\r\n      paragraph.innerHTML = '';\r\n      textArray.forEach(text => {\r\n        if (isArabic()) paragraph.setAttribute('dir', 'rtl');\r\n        if (isFrench()) text.verse_id = ` ${text.verse_start}`;\r\n        paragraph.innerHTML += `<span id='${text.verse_id}'' class='clickMe'>${text.verse_id} ${text.verse_text}<\/span>`;\r\n      });\r\n    }\r\n\r\n    const displayBooks = (booksList) => {\r\n      const dropdown = document.querySelector('.dropdown-content');\r\n\r\n      dropdown.innerHTML = '';\r\n      booksList.forEach((book) => {\r\n        const string = String(book.book_id);\r\n        dropdown.innerHTML += `<a class='bookName ${book.dam_id}' id='${book.book_id}' onclick=updateCurrentBook(\\'${string}\\')>${book.book_name}<\/a>`\r\n      });\r\n    }\r\n\r\n    const displayChapters = (currentBookData) => {\r\n      const dropdown = document.querySelector('.dropdown-contentCH');\r\n\r\n      dropdown.innerHTML = '';\r\n      const chapterList = currentBookData.chapters.split(',');\r\n\r\n      chapterList.forEach((chapter) => {\r\n        dropdown.innerHTML += `<a class='chapterID' onclick=updateCurrentChapter('${chapter}')>${chapter}<\/a>`\r\n      });\r\n    }\r\n\r\n    const setCurrentBook = (bookId) => {\r\n      const currentBook = document.querySelector('#book');\r\n\r\n      state.currentBookId = bookId;\r\n      state.currentBook = state.books[`${bookId}`].book_name;\r\n      currentBook.textContent = state.currentBook;\r\n    }\r\n\r\n    const setCurrentChapter = chapter => {\r\n      const currentChapter = document.querySelector('#chapter');\r\n\r\n      state.currentChapter = chapter;\r\n      currentChapter.textContent = state.currentChapter;\r\n    }\r\n\r\n    const setAudioSrc = (audio, audioData) => {\r\n      audio.currentTime = 0;\r\n      audio.src = `https:\/\/fcbhabdm.s3.amazonaws.com\/mp3audiobibles2\/${audioData.path}`;\r\n    }\r\n\r\n    const fetchBooks = async (key, version) => {\r\n      const url = getBooksEndpoint(key, version);\r\n      const books = await fetchData(url);\r\n      books.forEach(book => {\r\n        state.books[`${book.book_id}`] = book;\r\n      });\r\n      return books;\r\n    }\r\n\r\n    const fetchText = async (damId, chapter = 1) => {\r\n      if (isFrench()) {\r\n        const url = getFrenchTextEndpoint(state.version, chapter)\r\n        const text = await fetchData(url);\r\n        return text.data;\r\n      }\r\n      const url = getTextEndpoint(damId, chapter, state.version)\r\n      const text = await fetchData(url);\r\n      return text;\r\n    }\r\n\r\n    const fetchAudio = async (damId, chapter = 1) => {\r\n      const url = getAudioEndpoint(damId, chapter)\r\n      const audioData = await fetchData(url);\r\n      return audioData[0];\r\n    }\r\n\r\n    const fetchVerseTimestamps = async (damId, chapter = 1) => {\r\n      if (!isEnglish()) return;\r\n      const url = getVerseTimestampsEndpoint(damId, chapter);\r\n      const timestamps = await fetchData(url);\r\n      return timestamps;\r\n    }\r\n\r\n    const getBooksEndpoint = (key, version) => {\r\n      return `https:\/\/dbt.io\/library\/book?key=${key}&dam_id=${version}&v=2`\r\n    }\r\n\r\n    const getTextEndpoint = (damId, chapter, version) => {\r\n      return `https:\/\/dbt.io\/text\/verse?key=${state.key}&dam_id=${damId}2ET&book_id=${state.currentBookId}&chapter_id=${chapter}&v=2`;\r\n    }\r\n\r\n    const getFrenchTextEndpoint = (version, chapter) => {\r\n      return `https:\/\/api.v4.dbt.io\/bibles\/filesets\/${version}\/${state.currentBookId}\/${chapter}?key=52e62d4c-f7c8-4a8b-9008-8634d0fbddb0&v=4`;\r\n    }\r\n\r\n    const getAudioEndpoint = (damId, chapter) => {\r\n      return `https:\/\/dbt.io\/audio\/path?key=${state.key}&dam_id=${damId}2DA&book_id=${state.currentBookId}&chapter_id=${chapter}&v=2`;\r\n    }\r\n\r\n    const getVerseTimestampsEndpoint = (damId, chapter) => {\r\n      return `https:\/\/dbt.io\/audio\/versestart?key=${state.key}&dam_id=${damId}2DA&osis_code=${state.currentBook}&chapter_number=${chapter}&v=2`;\r\n    }\r\n\r\n    const fetchData = async (url) => {\r\n      try {\r\n        const response = await fetch(url);\r\n        const data = await response.json();\r\n        return data;\r\n      }\r\n      catch (err) {\r\n        console.log('Could not fetch data');\r\n        console.log(err);\r\n      }\r\n    }\r\n\r\n    const updateCurrentBook = (bookId = 'Luke') => {\r\n      setCurrentBook(bookId);\r\n      updateCurrentChapter();\r\n    }\r\n\r\n    const updateCurrentChapter = (chapter = 1) => {\r\n      const { currentBookId } = state;\r\n      const bookData = state.books[`${currentBookId}`];\r\n\r\n      setCurrentChapter(chapter);\r\n      displayChapters(bookData);\r\n      updateAudioSrc(chapter);\r\n      updateText(chapter);\r\n    }\r\n\r\n    const updateText = async (chapter = 1) => {\r\n      const { currentBookId } = state;\r\n      const damId = state.books[`${currentBookId}`].dam_id;\r\n      const text = await fetchText(damId, chapter);\r\n      \r\n      displayText(text);\r\n    }\r\n\r\n    const updateAudioSrc = async (chapter = 1) => {\r\n      const { currentBookId } = state;\r\n      const damId = state.books[`${currentBookId}`].dam_id;\r\n      const audioData = await fetchAudio(damId, chapter);\r\n      const audio = document.querySelector('#listener');\r\n\r\n      setAudioSrc(audio, audioData);\r\n    }\r\n\r\n    const handleChapterChange = () => {\r\n      prevChapter();\r\n      nextChapter();\r\n    }\r\n\r\n    const handleAudioPlayerChange = (audio) => {\r\n      audioPlaybackDisplay(audio);\r\n      playButton(audio);\r\n      progressBar(audio);\r\n      skipButtons(audio);\r\n      volumeControl(audio);\r\n      playbackSpeed(audio);\r\n    }\r\n\r\n    const handleTextClick = () => {\r\n      const section = document.querySelector('section');\r\n      const whatsapp = document.querySelector('#side_button');\r\n\r\n      whatsappHighlight(section);\r\n      shareButton(section, whatsapp);\r\n    }\r\n\r\n    const handleTextHighlighting = () => {\r\n      const audio = document.querySelector('#listener');\r\n\r\n      audio.addEventListener('timeupdate', () => highlightText(audio));\r\n    }\r\n    \r\n    const prevChapter = () => {\r\n      const prev = document.querySelector('#reverseBtn');\r\n\r\n      prev.addEventListener('click', () => {\r\n        if (isFirstChapter(state.currentBook, Number(state.currentChapter) - 1)) return;\r\n        updateCurrentChapter(Number(state.currentChapter) - 1);\r\n      });\r\n\r\n      function isFirstChapter(currentBook, chapter) {\r\n        const chapters = state.books[`${currentBook}`].chapters;\r\n        const [ firstChapter ] = chapters.split(',')[0];\r\n\r\n        if (chapter < Number(firstChapter)) return true;\r\n        return false;\r\n      }\r\n    }\r\n\r\n    const nextChapter = () => {\r\n      const next = document.querySelector('#forwardBtn');\r\n\r\n      next.addEventListener('click', () => {\r\n        if (isLastChapter(state.currentBook, Number(state.currentChapter) + 1)) return;\r\n        updateCurrentChapter(Number(state.currentChapter) + 1);\r\n      });\r\n\r\n      function isLastChapter(currentBook, chapter) {\r\n        const chapters = state.books[`${currentBook}`].chapters;\r\n        const [ lastChapter ] = chapters.split(',').slice(-1);\r\n\r\n        if (chapter > Number(lastChapter)) return true;\r\n        return false;\r\n      }\r\n    }\r\n\r\n    const audioPlaybackDisplay = audio => {\r\n      audio.addEventListener('canplay', () => {\r\n        handleProgress();\r\n        displayCurrentTime();\r\n        displayAudioDuration();\r\n      });\r\n      audio.addEventListener('timeupdate', () => {\r\n        handleProgress();\r\n        displayCurrentTime();\r\n      });\r\n\r\n      function handleProgress() {\r\n        const progressBar = document.querySelector('.progressFiller');\r\n        const percentComplete = (audio.currentTime \/ audio.duration) * 100;\r\n        progressBar.style.flexBasis = `${percentComplete}%`;\r\n      }\r\n\r\n      function displayCurrentTime() {\r\n        const currentTime = document.querySelector('#currentTime');\r\n        const minutes = getMinutes(audio.currentTime);\r\n        const seconds = getSeconds(audio.currentTime);\r\n\r\n        currentTime.innerHTML = `${minutes}:${(seconds < 10) ? `0${seconds}` : seconds}`;\r\n      }\r\n\r\n      function displayAudioDuration() {\r\n        const duration = document.querySelector('#duration');\r\n        const minutes = getMinutes(audio.duration);\r\n        const seconds = getSeconds(audio.duration);\r\n\r\n        if (minutes !== 0 || seconds !== 0) duration.innerHTML = '';\r\n        duration.innerHTML = `${minutes}:${(seconds < 10) ? `0${seconds}` : seconds}`;\r\n      }\r\n\r\n      function getMinutes(time) {\r\n        return Math.floor(parseInt(time) \/ 60);\r\n      }\r\n\r\n      function getSeconds(time) {\r\n        return parseInt(time) % 60;\r\n      }\r\n    }\r\n\r\n    const playButton = audio => {\r\n      const toggle = document.querySelector('#toggle');\r\n\r\n      toggle.addEventListener('click', togglePlay);\r\n\r\n      function togglePlay() {\r\n        const method = audio.paused ? 'play' : 'pause';\r\n        audio[method]();\r\n        updateButton();\r\n      }\r\n\r\n      function updateButton() {\r\n        const icon = audio.paused ? '\u25ba' : '\u275a\u275a';\r\n        toggle.textContent = icon;\r\n      }\r\n    }\r\n\r\n    const progressBar = audio => {\r\n      const progress = document.querySelector('.progress');\r\n\r\n      let mousedown = false;\r\n      progress.addEventListener('click', scrub);\r\n      progress.addEventListener('mousemove', (e) => mousedown && scrub(e));\r\n      progress.addEventListener('mousedown', () => mousedown = true);\r\n      progress.addEventListener('mouseup', () => mousedown = false);\r\n\r\n      function scrub(e) {\r\n        const scrubTime = (e.offsetX \/ progress.offsetWidth) * audio.duration;\r\n        audio.currentTime = scrubTime;\r\n      }\r\n    }\r\n\r\n    const skipButtons = audio => {\r\n      const skipButtons = document.querySelectorAll('[data-skip]');\r\n\r\n      skipButtons.forEach(button => button.addEventListener('click', skip));\r\n\r\n      function skip() {\r\n        audio.currentTime += parseFloat(this.dataset.skip);\r\n      }\r\n    }\r\n\r\n    const volumeControl = audio => {\r\n      const volume = document.querySelector('.slider');\r\n\r\n      volume.addEventListener('change', handleVolumeChange);\r\n      volume.addEventListener('mousemove', handleVolumeChange);\r\n\r\n      function handleVolumeChange() {\r\n        audio[this.name] = this.value;\r\n      }\r\n    }\r\n\r\n    const playbackSpeed = audio => {\r\n      const speed = document.querySelector('.playSpeed');\r\n\r\n      speed.addEventListener('click', changeSpeed);\r\n\r\n      function changeSpeed() {\r\n        if (speed.textContent == '1x') {\r\n          speed.textContent = '1.5x';\r\n          audio.playbackRate = 1.5;\r\n        } else if (speed.textContent == '1.5x') {\r\n          speed.textContent = '.75x';\r\n          audio.playbackRate = 0.75;\r\n        } else {\r\n          speed.textContent = '1x';\r\n          audio.playbackRate = 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    const whatsappHighlight = section => {\r\n      section.addEventListener('click', event => {\r\n        if (event.target.classList.contains('clickMe')) {\r\n          clickToHighlight(event);\r\n        }\r\n      });\r\n\r\n      function clickToHighlight(event) {\r\n        if (isAudioPlaying()) return;\r\n        toggleWhatsappHighlight(event);\r\n      }\r\n\r\n      function isAudioPlaying() {\r\n        return toggle.textContent == '\u275a\u275a';\r\n      }\r\n\r\n      function toggleWhatsappHighlight(event) {\r\n        if (isVerseHighlighted(event)) {\r\n          removeWhatsappHighlight(event);\r\n        } else {\r\n          addWhatsappHighlight(event);\r\n        }\r\n      }\r\n\r\n      function isVerseHighlighted(event){\r\n        return event.target.classList.contains('highlight2');\r\n      }\r\n\r\n      function removeWhatsappHighlight(event) {\r\n        event.target.className = event.target.className.replace(' highlight2', '');\r\n        event.target.style.background = '#ffffff';\r\n        event.target.style.color = 'black';\r\n      }\r\n\r\n      function addWhatsappHighlight(event) {\r\n        event.target.className += ' highlight2';\r\n        event.target.style.background = '#1e9544';\r\n        event.target.style.color = 'white';\r\n      }\r\n    }\r\n\r\n    const shareButton = (section, whatsapp) => {\r\n      section.addEventListener('click', event => {\r\n        if (event.target.classList.contains('clickMe')) {\r\n          display(whatsapp);\r\n        }\r\n      });\r\n\r\n      function display(whatsapp) {\r\n        const verseSelection = selectHighlightedVerses();\r\n        if (verseSelection == 'https:\/\/wa.me\/?text=') {\r\n          showShareButton(whatsapp);\r\n        } else {\r\n          removeShareButton(whatsapp, verseSelection);\r\n        }\r\n      }\r\n\r\n      function selectHighlightedVerses() {\r\n        let verseSelection = 'https:\/\/wa.me\/?text=';\r\n        paragraph.querySelectorAll('.highlight2').forEach(verse => {\r\n          verseSelection += verse.innerText\r\n        });\r\n        verseSelection = verseSelection.split(' ').join('%20');\r\n        return verseSelection;\r\n      }\r\n\r\n      function showShareButton(whatsapp) {\r\n        whatsapp.removeAttribute('href');\r\n        whatsapp.removeAttribute('xlink:href');\r\n        whatsapp.classList.add('show');\r\n      }\r\n\r\n      function removeShareButton(whatsapp, verseSelection) {\r\n        whatsapp.setAttribute('href', verseSelection);\r\n        whatsapp.setAttribute('xlink:href', verseSelection);\r\n        whatsapp.classList.remove('show');\r\n      }\r\n    }\r\n\r\n    const highlightText = (audio) => {\r\n      if (!isEnglish()) return;\r\n      const { timestamps } = state;\r\n      const lastVerse = timestamps.length;\r\n\r\n      timestamps.forEach((timestamp, index, array) => {\r\n        const currentVerse = timestamp.verse_id;\r\n\r\n        if (isCorrectTimeframe(audio, {timestamp, index, array})) {\r\n          highlightVerse(currentVerse, array);\r\n        } else if (areTimestampsIncorrect(audio, array)) {\r\n          highlightVerse(lastVerse, array);\r\n          unhighlightVerse(lastVerse - 1, array);\r\n        } else {\r\n          unhighlightVerse(currentVerse, array);\r\n        }\r\n      });\r\n\r\n      function isCorrectTimeframe(audio, {timestamp, index, array}) {\r\n        const isGreaterThanCurrentVerse = audio.currentTime >= timestamp.verse_start;\r\n        const isLessThanNextVerse = audio.currentTime < array[index + 1].verse_start;\r\n        const isLessThanDuration = audio.currentTime < audio.duration - 1;\r\n        \r\n        return isGreaterThanCurrentVerse && isLessThanNextVerse && isLessThanDuration;\r\n      }\r\n\r\n      function areTimestampsIncorrect(audio, timestamps) {\r\n        const areTimestampsTooShort = audio.currentTime >= timestamps[timestamps.length - 1].verse_start;\r\n        const isThereStillAudioToPlay = audio.currentTime <= audio.duration - 1;\r\n\r\n        return areTimestampsTooShort && isThereStillAudioToPlay;\r\n      }\r\n\r\n      function highlightVerse(index, timestamps) {\r\n        document.getElementById(timestamps[index - 1].verse_id).style.background = \"#f9e93d\";\r\n        document.getElementById(timestamps[index - 1].verse_id).style.color = 'black';\r\n      }\r\n\r\n      function unhighlightVerse(index, timestamps) {\r\n        document.getElementById(timestamps[index - 1].verse_id).style.background = \"#ffffff\";\r\n        document.getElementById(timestamps[index - 1].verse_id).style.color = 'black';\r\n      }\r\n    }\r\n\r\n    const isEnglish = () => {\r\n      return state.version == 'ENGESV';\r\n    }\r\n\r\n    const isArabic = () => {\r\n      return state.version == 'ARBAS1';\r\n    }\r\n\r\n    const isFrench = () => {\r\n      return state.version == 'FRNPDV';\r\n    }\r\n  <\/script>\r\n<\/html>\n<h2 class=\"wp-block-heading\">The books of the New Testament:<\/h2>\n<p><strong>Book: Contents of interest<\/strong><br \/><strong>Section 1<\/strong>: The Gospels. These books deal with the life and teachings of Jesus Christ. Each is written from a different point of view and for a different purpose. All of them spend a major portion of the text dealing with the last week of Jesus\u2019s life, His crucifixion and His resurrection.<br \/><strong>Matthew<\/strong>: Visit of the Magi, the Sermon on the Mount, about two dozen parables.<br \/><strong>Mark<\/strong>: First gospel written.<br \/><strong>Luke<\/strong>: Birth of Jesus, the Good Samaritan, the Prodigal Son, about two dozen more parables.<br \/><strong>John<\/strong>: Different in style and tone from the other gospels.  Jesus\u2019s raising of Lazarus from the dead.<br \/><strong>Section 2<\/strong>: History of the Early Church<br \/><strong>Acts<\/strong>: Jesus\u2019 ascension into heaven, the Day of Pentecost, the conversion of Paul and his four missionary journeys.<br \/><strong>Section 3<\/strong>: The Letters. These were written to churches and individuals, each addressing a multitude of issues, both theological and practical application.<br \/><strong>Romans<\/strong>: The most complete expression of Christian theology and doctrine.<br \/><strong>1 &amp; 2 Corinthians<\/strong>: The famous chapter on Christian love: 1 Corinthians 13.<br \/><strong>Galatians<\/strong>: Deals with the superiority of grace over the Jewish law.<br \/><strong>Ephesians<\/strong>: Famous expression that works do not save, only faith in God\u2019s grace.<br \/><strong>Philippians<\/strong>: Often called the epistle of joy.<br \/><strong>Colossians<\/strong>: All the fullness of God is found in Jesus.<br \/><strong>1 &amp; 2 Thessalonians<\/strong>: Deal with the second coming and signs of the same.<br \/><strong>1 &amp; 2 Timothy<\/strong>: Written to a young pastor, it gives direction for leadership.<br \/><strong>Titus<\/strong>: Also deals with church leadership.<br \/><strong>Philemon<\/strong>: A letter from Paul asking a master to forgive a runaway slave.<br \/><strong>Hebrews<\/strong>: Teachings about Jesus being a sacrifice once for all.<br \/><strong>James<\/strong>: Good works follow faith.<br \/><strong>1 &amp; 2 Peter<\/strong>: Encouragement for Christians undergoing persecution.<br \/><strong>1, 2 &amp; 3 John<\/strong>: Address early forms of heresy.<br \/><strong>Jude<\/strong>: Also addresses heresy, encourages Christians to remain true.<br \/><strong>Section 4<\/strong>:  A View of the Future.  This book is a vision of the end of the world and the return of Jesus in victory and glory.<br \/><strong>Revelation<\/strong>: The Antichrist and the Beast, the New Jerusalem.<\/p>\n<p>A note on the corruption of texts: Some people believe that the present New Testament is a corrupted, revised version of the original texts.  Nothing could be further from the truth. Please go to <a href=\"https:\/\/bienvenueafricains.com\/en\/questions-and-answers\/\">https:\/\/bienvenueafricains.com\/en\/questions-and-answers\/<\/a> for a complete discussion of this issue.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The New Testament (Injil) The New Testament (Injil) is a collection of 27 books which forms the second, briefer section of the Christian Bible. Unlike the Old Testament (Tawrat and Zabur) which was written over many centuries, the New Testament was written over a span of 100 years, and most of it within a couple [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":750,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"template_builder.php","meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Audio New Testament in Jula - Welcome Africans<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Audio New Testament in Jula - Welcome Africans\" \/>\n<meta property=\"og:description\" content=\"The New Testament (Injil) The New Testament (Injil) is a collection of 27 books which forms the second, briefer section of the Christian Bible. Unlike the Old Testament (Tawrat and Zabur) which was written over many centuries, the New Testament was written over a span of 100 years, and most of it within a couple [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/\" \/>\n<meta property=\"og:site_name\" content=\"Welcome Africans\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-03T23:47:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/\",\"url\":\"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/\",\"name\":\"Audio New Testament in Jula - Welcome Africans\",\"isPartOf\":{\"@id\":\"https:\/\/bienvenueafricains.com\/en\/#website\"},\"datePublished\":\"2012-11-27T00:08:36+00:00\",\"dateModified\":\"2019-11-03T23:47:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/bienvenueafricains.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jula\",\"item\":\"https:\/\/bienvenueafricains.com\/en\/jula\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Audio New Testament in Jula\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bienvenueafricains.com\/en\/#website\",\"url\":\"https:\/\/bienvenueafricains.com\/en\/\",\"name\":\"Welcome Africans\",\"description\":\"On the Straight Path to God through Nabi Isa\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bienvenueafricains.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Audio New Testament in Jula - Welcome Africans","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/","og_locale":"en_US","og_type":"article","og_title":"Audio New Testament in Jula - Welcome Africans","og_description":"The New Testament (Injil) The New Testament (Injil) is a collection of 27 books which forms the second, briefer section of the Christian Bible. Unlike the Old Testament (Tawrat and Zabur) which was written over many centuries, the New Testament was written over a span of 100 years, and most of it within a couple [&hellip;]","og_url":"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/","og_site_name":"Welcome Africans","article_modified_time":"2019-11-03T23:47:28+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/","url":"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/","name":"Audio New Testament in Jula - Welcome Africans","isPartOf":{"@id":"https:\/\/bienvenueafricains.com\/en\/#website"},"datePublished":"2012-11-27T00:08:36+00:00","dateModified":"2019-11-03T23:47:28+00:00","breadcrumb":{"@id":"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bienvenueafricains.com\/en\/jula\/new-testament-jula\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bienvenueafricains.com\/en\/"},{"@type":"ListItem","position":2,"name":"Jula","item":"https:\/\/bienvenueafricains.com\/en\/jula\/"},{"@type":"ListItem","position":3,"name":"Audio New Testament in Jula"}]},{"@type":"WebSite","@id":"https:\/\/bienvenueafricains.com\/en\/#website","url":"https:\/\/bienvenueafricains.com\/en\/","name":"Welcome Africans","description":"On the Straight Path to God through Nabi Isa","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bienvenueafricains.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/pages\/377"}],"collection":[{"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/comments?post=377"}],"version-history":[{"count":13,"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/pages\/377\/revisions"}],"predecessor-version":[{"id":6018,"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/pages\/377\/revisions\/6018"}],"up":[{"embeddable":true,"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/pages\/750"}],"wp:attachment":[{"href":"https:\/\/bienvenueafricains.com\/en\/wp-json\/wp\/v2\/media?parent=377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}