​
Code Examples

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="expires" content="0" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximu-scale=1.0,user-scalable=no" />
  <title>Duix Sdk Simple Example</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    .modal {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-content {
      background-color: #fefefe;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 600px;
      border-radius: 4px;
    }

    .container {
      width: 100vw;
      height: 100vh;
    }

    .item {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .item>div {
      margin-bottom: 10px;
      gap: 10px;
    }

    .item>span {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .input {
      background: #F2F3F5;
      height: 40px;
      line-height: 40px;
      border: none;
      outline: none;
      border-radius: 2px;
      padding: 0 8px;
      width: 100%;
      box-sizing: border-box;
    }

    .btn {
      border: none;
      border-radius: 4px;
      width: 100%;
      height: 40px;
      background: #166AFF;
      color: #fff;
      cursor: pointer;
      margin-top: 20px;
    }
    .subtitle {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translate(-50%);
      color: #000;
      padding: 12px;
      box-sizing: border-box;
      text-align: center;
      background-color: rgba(255,255, 255, 0.5);
      border-radius: 12px;
      visibility: hidden;
    }
    .subtitle:empty {
      display: none;
    }
  </style>
  <script src="https://cdn.guiji.ai/duix/sdk/0.2.1/duix.js"></script>
</head>

<body>
  <!-- Container -->
  <div class="container"></div>
  <div class="subtitle"></div>
  <div id="modal" class="modal">
    <div class="modal-content">
      <div class="item">
        <span>DEMO</span>
      </div>
      <div class="item">
        <input class="input" id="sign" placeholder="please enter sign" value="" />
      </div>
      <div class="item">
        <input class="input" id="conversationId" placeholder="please enter conversationId" value="" />
      </div>
      <div class="item">
        <button id="start" onclick="init()" class="btn">Start</button>
      </div>
    </div>
  </div>
  <script>
    // The duix.js used for demonstration may not be the latest. Please install the latest sdk via npm
    const duix = new window.DUIX()
    function init() {
      const sign = document.querySelector('#sign').value // sign is generated by the server side
      const conversationId = document.querySelector('#conversationId').value // duix platform session id
      if (!sign || !conversationId) {
        return alert('The parameter cannot be empty')
      }
      duix.on('error', data => {
        console.error(data)
      })
      duix.on('intialSucccess', () => {
        console.info('intialSucccess')
        // At this point, the initialization is successful and start can be called
        // Some browsers, especially mobile ones, need to be triggered by user action to play the digital human. It is recommended that the start event be called by user click, even if muted is muted, otherwise some browsers may not display the digital human
        duix.start({ openAsr: true }).then(res => {
          console.info('start', res)
        })
      })
      duix.on('bye', (data) => {
        console.info('bye', data)
      })
      duix.on('progress', progress => {
        console.info('progress', progress)
      })
      duix.on('show', () => {
        console.info('show')
        // At this point, it can be confirmed that the video has been played
        document.querySelector('#modal').style.display = "none"
        document.querySelector('.subtitle').style.visibility = "visible"
      })
      duix.on('openAsrSuccess', () => {
        console.info('openAsrSuccess')
      })
      duix.on('asrStart', (data) => {
        console.info('asrStart', data)
        document.querySelector('.subtitle').innerText = ''
      })
      duix.on('asrData', (data) => {
        console.info('asrData', data)
      })
      duix.on('asrStop', (data) => {
        console.info('asrStop', data)
      })
      duix.on('speakStart', (data) => {
        console.info('speakStart', data)
      })
      duix.on('speakEnd', (data) => {
        console.info('speakEnd', data)
      })
      duix.on('speakSection', (data) => {
        console.info('speakSection', data)
        document.querySelector('.subtitle').innerText = data.text
      })
      duix.on('speakError', (data) => {
        console.info('speakError', data)
      })


      duix.init({
        sign,
        containerLable: '.container',
        conversationId: conversationId,
        platform: 'duix.com'
      }).then(data => {
        console.info('init', data)
      })
    }

  </script>
</body>

</html>