zoukankan      html  css  js  c++  java
  • iviewtable表格数据 录音播放下载

    播放下载:

    {
    title: '通话录音',
    align: 'center',
    key: 'recordUrl',
    render: (h, params) => {
    if (params.row.recordUrl.substr(-3) == 'wav') {
    return h('div', {
    style: {

    }
    }, [
    h('audio', {
    style: {
    textAlign: 'center',
    padding: '4px',
    '100px'
    },
    attrs: {
    src: 'http://ai.foxcall.cn' + params.row.recordUrl,
    id: params.row.id,
    'data-flag': true
    }
    }, params.row.recordUrl),
    h('i', {
    style: {
    'font-style': 'normal',
    'color': '#2d8cf0',
    'cursor': 'pointer'
    },
    on: {
    click: () => {
    this.play(params)
    }
    }
    }, '播放'),
    h('a', {
    'style': {
    margin: '0 4px',
    'color': '#2d8cf0',
    'cursor': 'pointer',
    'margin': '0 2px'
    },
    attrs: {
    href: 'http://ai.foxcall.cn' + params.row.recordUrl
    }
    }, '下载')
    ])
    } else {
    return h('div', [
    h('Tooltip', {
    props: { placement: 'bottom' }
    }, [
    h('span', {
    style: {
    display: 'inline-block',
    params.column._width * 0.9 + 'px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    zIndex: 99
    }
    }, params.row.recordUrl),
    h('span', {
    slot: 'content',
    style: { whiteSpace: 'normal', wordBreak: 'break-all' }
    }, params.row.recordUrl)
    ])
    ])
    }
    }
    },

    播放:

    play (value) {
    let id = value.row.id
    let i = document.getElementById(id).nextElementSibling
    let au = document.getElementById(id)
    let end_time = au.duration
    if (au.dataset.flag == 'true') {
    au.play()
    i.textContent = '暂停'
    i.style.cssText = 'color:red;font-style:normal;cursor:pointer'
    au.dataset.flag = false
    } else {
    au.pause()
    i.textContent = '播放'
    i.style.cssText = 'color:#2d8cf0;font-style:normal;cursor:pointer'
    au.dataset.flag = true
    }
    var count_interval = setInterval(function () {
    if (au.currentTime == end_time) {
    i.textContent = '播放'
    i.style.cssText = 'color:#2d8cf0;font-style:normal;cursor:pointer'
    au.dataset.flag = true
    clearInterval(count_interval)
    }
    }, 1000)
    },
    多多指教,我还是前端小生
  • 相关阅读:
    前向传播与反向传播
    卷积运算
    使用GUI工具Portainer.io管控Docker容器
    NextCloud: 打造自己的网盘
    金融危机和经济危机有什么不同
    【转载】Windows环境的Workflow神器:AutoHotkey
    Lua常用模块
    Lua基本语法
    区分 IaaS、SaaS 和 PaaS
    【笔记】流畅的Python
  • 原文地址:https://www.cnblogs.com/yangslin/p/11308022.html
Copyright © 2011-2022 走看看