zhaojunkai

音乐详情-联调接口引入数据,创建音频播放实例

  1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g style="opacity:0.20000000298023224;"><g><path d="M6.29805,13.2927L19.701900000000002,20.8323C19.8353,20.9073,20,20.811,20,20.658L20,3.34197C20,3.189004,19.8353,3.0926614,19.701900000000002,3.167654L6.29805,10.70735C6.1647300000000005,10.78234,6,10.686,6,10.53303L6,3.2C6,3.0895431,5.9104600000000005,3,5.8,3L4.2,3C4.0895431,3,4,3.0895431,4,3.2L4,20.6764C4,20.8251,4.156463,20.9218,4.289443,20.8553L5.8894400000000005,20.0553C5.9572,20.0214,6,19.9521,6,19.8764L6,13.467C6,13.314,6.1647300000000005,13.2177,6.29805,13.2927" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g></g></svg>
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712047709053" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11870" width="28" height="28" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M878.885769 568.138291c0 201.397023-163.248995 364.646017-364.646017 364.646017S149.485359 769.535314 149.485359 568.138291c0-192.076766 148.582234-349.076131 336.901997-363.309391 0-0.4335-0.252875-0.903126-0.252875-1.408876V147.353983h-112.168207c-15.497636 0-28.033021-12.535384-28.033021-28.105271 0-15.497636 12.535384-28.033021 28.033021-28.03302h280.51083c15.461511 0 28.105271 12.535384 28.105271 28.03302 0 15.569886-12.643759 28.105271-28.105271 28.105271h-112.168207V203.383899c0 0.541875-0.252875 0.975376-0.252875 1.408876 188.247513 14.269385 336.829747 171.26875 336.829747 363.345516zM514.239752 259.52219c-170.437875 0-308.616101 138.142101-308.616101 308.616101s138.142101 308.616101 308.616101 308.616101c170.365625 0 308.507726-138.142101 308.507726-308.616101s-138.142101-308.616101-308.507726-308.616101z m0 392.787413c-46.529034 0-84.171312-37.714528-84.171312-84.171312 0-36.558527 23.481267-67.445424 56.029916-79.005433V343.693502c0-15.497636 12.535384-28.033021 28.105271-28.033021 15.497636 0 28.033021 12.535384 28.03302 28.033021v145.439356c32.657024 11.560008 56.138291 42.446906 56.138291 79.005433 0 46.456784-37.714528 84.171312-84.135186 84.171312z" fill="#4D5258" p-id="11871"></path></svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_13448_089636"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g style="opacity:0.20000000298023224;" clip-path="url(#master_svg0_13448_089636)"><g><path d="M10.67639,4L3.2,4C3.0895431,4,3,4.0895431,3,4.2L3,20.8C3,20.9105,3.0895431,21,3.2,21L20.8,21C20.9105,21,21,20.9105,21,20.8L21,5.12361C21,5.04785,20.9572,4.9786,20.8894,4.944721L19.2894,4.144721C19.1565,4.0782313,19,4.17493,19,4.323607L19,19L5,19L5,6L9.87639,6C9.95215,6,10.0214,5.9572,10.05528,5.8894400000000005L10.85528,4.289443C10.92177,4.156463,10.82507,4,10.67639,4" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g><g><path d="M11.5,3.0706476L11.5,6.52935C11.5,6.56044,11.5339189,6.57965,11.5605798,6.56365L14.44283,4.8343C14.46873,4.81876,14.46873,4.78124,14.44283,4.7657L11.5605798,3.0363479C11.5339189,3.0203513,11.5,3.0395558,11.5,3.0706476" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g><g><path d="M15,3.0706476L15,6.52935C15,6.56044,15.0339189,6.57965,15.0605798,6.56365L17.94283,4.8343C17.96873,4.81876,17.96873,4.78124,17.94283,4.7657L15.0605798,3.0363479C15.0339189,3.0203513,15,3.0395558,15,3.0706476" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g><g><path d="M8.916,11.64L8.916,16L9.964,16L9.964,10.48L8.916,10.48L7.9879999999999995,11.176L7.9879999999999995,12.312000000000001L8.916,11.64ZM10.788,14.864L10.788,16L11.9,16L11.9,14.864L10.788,14.864ZM13.008,15.612C13.27725,15.9294,13.692,16.0881,14.251999999999999,16.088C14.812000000000001,16.088,15.22663,15.928,15.496,15.608C15.76525,15.2881,15.9,14.81338,15.9,14.184L15.9,12.232C15.9,11.623999999999999,15.76525,11.16537,15.496,10.856C15.22663,10.54675,14.812000000000001,10.392,14.251999999999999,10.392C13.71325,10.392,13.304,10.548,13.024000000000001,10.86C12.744,11.172,12.604,11.62937,12.604,12.232L12.604,14.184C12.604,14.81875,12.73863,15.2948,13.008,15.612ZM14.728,14.932C14.64525,15.0947,14.48663,15.176,14.251999999999999,15.176C14.02262,15.176,13.866620000000001,15.0947,13.783999999999999,14.932C13.70125,14.76937,13.66,14.49075,13.66,14.096L13.66,12.384C13.66,11.989370000000001,13.7,11.712,13.780000000000001,11.552C13.86,11.392,14.01725,11.312000000000001,14.251999999999999,11.312000000000001C14.48663,11.312000000000001,14.64525,11.392,14.728,11.552C14.81063,11.712,14.852,11.989370000000001,14.852,12.384L14.852,14.096C14.852,14.49075,14.81063,14.76937,14.728,14.932Z" fill="#4D5258" fill-opacity="1"/></g></g></svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g style="opacity:0.20000000298023224;"><g><path d="M17.701900000000002,13.2927L4.298053,20.8323C4.164731,20.9073,4,20.811,4,20.658L4,3.34197C4,3.189004,4.164731,3.0926614,4.298052,3.167654L17.701900000000002,10.70735C17.8353,10.78234,18,10.686,18,10.53303L18,3.2C18,3.0895431,18.0895,3,18.2,3L19.8,3C19.9105,3,20,3.0895431,20,3.2L20,20.6764C20,20.8251,19.8435,20.9218,19.7106,20.8553L18.110599999999998,20.0553C18.0428,20.0214,18,19.9521,18,19.8764L18,13.467C18,13.314,17.8353,13.2177,17.701900000000002,13.2927" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g></g></svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="28" height="28" viewBox="0 0 28 28"><g style="opacity:0.20000000298023224;"><g><path d="M3.5,4.31780565625L3.5,6.18447265625Q3.5,6.2308826562499995,3.5177614,6.27376265625Q3.5355229,6.31664265625,3.5683417,6.34946265625Q3.601161,6.38228265625,3.644041,6.40004265625Q3.68692,6.41780265625,3.733333,6.41780265625L24.2667,6.41780265625Q24.3131,6.41780265625,24.356,6.40004265625Q24.3988,6.38228265625,24.4317,6.34946265625Q24.4645,6.31664265625,24.4822,6.27376265625Q24.5,6.2308826562499995,24.5,6.18447265625L24.5,4.31780565625Q24.5,4.27139265625,24.4822,4.22851365625Q24.4645,4.18563365625,24.4317,4.15281435625Q24.3988,4.11999555625,24.356,4.10223405625Q24.3131,4.08447265625,24.2667,4.08447265625L3.733333,4.08447265625Q3.68692,4.08447265625,3.644041,4.10223405625Q3.601161,4.11999555625,3.5683417,4.15281435625Q3.5355229,4.18563365625,3.5177614,4.22851365625Q3.5,4.27139265625,3.5,4.31780565625ZM10.20878,13.80699265625L3.862763,9.57631265625C3.707701,9.47294265625,3.5,9.58410265625,3.5,9.77046265625L3.5,18.23177265625C3.5,18.41817265625,3.707701,18.52937265625,3.862763,18.42597265625L10.20878,14.19527265625C10.34732,14.10297265625,10.34732,13.89935265625,10.20878,13.80699265625ZM24.2667,12.83349265625L13.5609,12.83349265625C13.47249,12.83349265625,13.3917,12.88343265625,13.35217,12.96248265625L12.41884,14.82917265625C12.34127,14.98427265625,12.45409,15.16687265625,12.62754,15.16687265625L24.2667,15.16687265625C24.3955,15.16687265625,24.5,15.06237265625,24.5,14.93347265625L24.5,13.06683265625C24.5,12.93796265625,24.3955,12.83349265625,24.2667,12.83349265625ZM3.5,21.81777265625L3.5,23.68447265625Q3.5,23.73087265625,3.5177614,23.77377265625Q3.5355229,23.81667265625,3.5683417,23.84947265625Q3.601161,23.88227265625,3.644041,23.90007265625Q3.68692,23.91777265625,3.733333,23.91777265625L24.2667,23.91777265625Q24.3131,23.91777265625,24.356,23.90007265625Q24.3988,23.88227265625,24.4317,23.84947265625Q24.4645,23.81667265625,24.4822,23.77377265625Q24.5,23.73087265625,24.5,23.68447265625L24.5,21.81777265625Q24.5,21.77137265625,24.4822,21.72847265625Q24.4645,21.68567265625,24.4317,21.65277265625Q24.3988,21.61997265625,24.356,21.60227265625Q24.3131,21.58447265625,24.2667,21.58447265625L3.733333,21.58447265625Q3.68692,21.58447265625,3.644041,21.60227265625Q3.601161,21.61997265625,3.5683417,21.65277265625Q3.5355229,21.68567265625,3.5177614,21.72847265625Q3.5,21.77137265625,3.5,21.81777265625Z" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g></g></svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g style="opacity:0.20000000298023224;"><g><path d="M16.61255231628418,0.6909312143875121L15.48135231628418,1.8221886143875121C15.40315231628418,1.9003386143875123,15.40325231628418,2.0270586143875122,15.48145231628418,2.105148614387512L16.87945231628418,3.5008286143875122L2.19995231628418,3.5008286143875122C2.0894953162841796,3.5008286143875122,1.9999523162841797,3.5903786143875123,1.9999523162841797,3.7008286143875124L1.9999523162841797,14.377268614387512C1.9999523162841797,14.452968614387512,2.0427528162841795,14.522268614387512,2.1105093162841797,14.556068614387513L3.7105123162841798,15.356068614387512C3.8434923162841796,15.422568614387512,3.9999523162841797,15.325868614387511,3.9999523162841797,15.177268614387513L3.9999523162841797,5.500828614387512L18.99995231628418,5.500828614387512L18.99995231628418,5.499258614387513L21.22095231628418,5.499258614387513C21.39905231628418,5.499258614387513,21.48835231628418,5.283828614387512,21.36235231628418,5.157838614387512L16.895452316284178,0.6909312143875121C16.81735231628418,0.6128262143875122,16.69065231628418,0.6128263143875122,16.61255231628418,0.6909312143875121ZM19.99995231628418,8.823458614387512L19.99995231628418,18.499868614387513L5.11660231628418,18.499868614387513L5.115252316284179,18.498468614387512L2.7755723162841797,18.498468614387512C2.5973913162841797,18.498468614387512,2.50815731628418,18.71396861438751,2.6341503162841797,18.839968614387512L7.101052316284179,23.30686861438751C7.17916231628418,23.384968614387514,7.30579231628418,23.384968614387514,7.383902316284179,23.30686861438751L8.51515231628418,22.17556861438751C8.59330231628418,22.097468614387513,8.593252316284179,21.970668614387513,8.51503231628418,21.89256861438751L7.11995231628418,20.499868614387513L21.79995231628418,20.499868614387513C21.91045231628418,20.499868614387513,21.99995231628418,20.410268614387512,21.99995231628418,20.299868614387513L21.99995231628418,9.623458614387513C21.99995231628418,9.547708614387512,21.95715231628418,9.478458614387511,21.889352316284178,9.444578614387511L20.28935231628418,8.644578614387513C20.15645231628418,8.578088614387513,19.99995231628418,8.674788614387513,19.99995231628418,8.823458614387512Z" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g></g></svg>
1 -<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g><g><path d="M6.915255046875,4.7314907592749025L11.848588046875001,5.964826319274902C11.937618046875,5.987086319274902,12.000078046875,6.067076319274903,12.000078046875,6.158856319274903L12.000078046875,28.413216319274902C12.000078046875,28.5433163192749,11.877808046875,28.638816319274902,11.751578046875,28.6072163192749L6.818241046875,27.3739163192749C6.729207546875,27.351616319274903,6.666748046875,27.2716163192749,6.666748046875,27.179916319274902L6.666748046875,4.925519319274902C6.666748046875,4.795405019274902,6.789026046875,4.6999334192749025,6.915255046875,4.7314907592749025M20.248548046875,4.7314907592749025L25.181848046875,5.964826319274902C25.270848046875,5.987086319274902,25.333348046875,6.067076319274903,25.333348046875,6.158856319274903L25.333348046875,28.413216319274902C25.333348046875,28.5433163192749,25.211048046875,28.638816319274902,25.084848046875,28.6072163192749L20.151448046875,27.3739163192749C20.062448046874998,27.351616319274903,20.000048046875,27.2716163192749,20.000048046875,27.179916319274902L20.000048046875,4.925519319274902C20.000048046875,4.795405019274902,20.122248046875,4.6999334192749025,20.248548046875,4.7314907592749025" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>  
  1 +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712048425819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13530" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M893.035 463.821679C839.00765 429.699141 210.584253 28.759328 179.305261 8.854514 139.495634-16.737389 99.686007 17.385148 99.686007 57.194775v909.934329c0 45.496716 42.653172 68.245075 76.775709 48.340262 45.496716-28.435448 676.763657-429.375262 716.573284-454.967165 34.122537-22.748358 34.122537-76.775709 0-96.680522z" fill="#FFFFFF" p-id="13531"></path></svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><g><g><path d="M6.915255046875,4.7314907592749025L11.848588046875001,5.964826319274902C11.937618046875,5.987086319274902,12.000078046875,6.067076319274903,12.000078046875,6.158856319274903L12.000078046875,28.413216319274902C12.000078046875,28.5433163192749,11.877808046875,28.638816319274902,11.751578046875,28.6072163192749L6.818241046875,27.3739163192749C6.729207546875,27.351616319274903,6.666748046875,27.2716163192749,6.666748046875,27.179916319274902L6.666748046875,4.925519319274902C6.666748046875,4.795405019274902,6.789026046875,4.6999334192749025,6.915255046875,4.7314907592749025M20.248548046875,4.7314907592749025L25.181848046875,5.964826319274902C25.270848046875,5.987086319274902,25.333348046875,6.067076319274903,25.333348046875,6.158856319274903L25.333348046875,28.413216319274902C25.333348046875,28.5433163192749,25.211048046875,28.638816319274902,25.084848046875,28.6072163192749L20.151448046875,27.3739163192749C20.062448046874998,27.351616319274903,20.000048046875,27.2716163192749,20.000048046875,27.179916319274902L20.000048046875,4.925519319274902C20.000048046875,4.795405019274902,20.122248046875,4.6999334192749025,20.248548046875,4.7314907592749025" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="28.000001907348633" height="28.000001907348633" viewBox="0 0 28.000001907348633 28.000001907348633"><g style="opacity:0.20000000298023224;"><g></g><g><path d="M3.5,25.08349609375L3.5,2.91682909375Q3.5,2.85937609375,3.5112086,2.80302709375Q3.5224172,2.74667709375,3.5444036,2.6935970937500002Q3.56639,2.6405170937499998,3.5983094,2.59274709375Q3.630229,2.54497609375,3.670854,2.50435009375Q3.71148,2.46372509375,3.759251,2.43180549375Q3.8070209999999998,2.39988609375,3.8601010000000002,2.37789969375Q3.913181,2.35591329375,3.969531,2.34470469375Q4.02588,2.33349609375,4.083333,2.33349609375L23.9167,2.33349609375Q23.9741,2.33349609375,24.0305,2.34470469375Q24.0868,2.35591329375,24.1399,2.37789969375Q24.193,2.39988609375,24.2407,2.43180549375Q24.2885,2.46372509375,24.3291,2.50435009375Q24.3698,2.54497609375,24.4017,2.59274709375Q24.4336,2.6405170937499998,24.4556,2.6935970937500002Q24.4776,2.74667709375,24.4888,2.80302709375Q24.5,2.85937609375,24.5,2.91682909375L24.5,15.16649609375L22.1666,15.16649609375L22.1666,4.66650609375L5.83325,4.66650609375L5.83325,23.33319609375L14,23.33319609375L14,25.66679609375L4.083333,25.66679609375Q4.02588,25.66679609375,3.969531,25.65559609375Q3.913181,25.64439609375,3.8601010000000002,25.62239609375Q3.8070209999999998,25.60039609375,3.759251,25.56849609375Q3.71148,25.53659609375,3.670854,25.49599609375Q3.630229,25.45539609375,3.5983094,25.40759609375Q3.56639,25.35979609375,3.5444036,25.30669609375Q3.5224172,25.25369609375,3.5112086,25.19729609375Q3.5,25.14099609375,3.5,25.08349609375Z" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g><g><path d="M9.333251953125,11.43447265625C9.333251953125,11.56334265625,9.437718953125,11.66780265625,9.566584953125,11.66780265625L17.355711953125002,11.66780265625C17.444091953125,11.66780265625,17.524881953125,11.61787265625,17.564411953125,11.53882265625L18.497741953125,9.67215565625C18.575311953125002,9.51701265625,18.462501953125,9.33447265625,18.289041953125,9.33447265625L9.566584953125,9.33447265625C9.437718953125,9.33447265625,9.333251953125,9.43893965625,9.333251953125,9.56780565625L9.333251953125,11.43447265625Z" fill="#4D5258" fill-opacity="1"/></g><g><path d="M9.333251953125,16.68203125C9.333251953125,16.81090125,9.437718953125,16.91536125,9.566584953125,16.91536125L14.439041953124999,16.91536125C14.527421953125,16.91536125,14.608221953125,16.86543125,14.647741953125,16.786381249999998L15.581081953125,14.91971425C15.658651953125,14.76457125,15.545831953124999,14.58203125,15.372381953125,14.58203125L9.566584953125,14.58203125C9.437718953125,14.58203125,9.333251953125,14.68649825,9.333251953125,14.81536425L9.333251953125,16.68203125Z" fill="#4D5258" fill-opacity="1"/></g><g><path d="M17.588956390625,19.15734328125L20.566870390625,19.16774328125L20.548890390625,24.31857328125L19.458060390625,24.314763281250002L19.471360390625,20.50559328125C19.471810390625,20.37673328125,19.367710390625,20.27190328125,19.238840390625,20.27145328125L18.346340390625,20.26833328125C18.217470390625,20.26788328125,18.112640390625,20.37198328125,18.112190390625,20.50085328125L18.098890390625,24.31002328125L17.054726390625,24.30637328125C16.925861390625,24.30592328125,16.821030110625,24.410023281249998,16.820580290625,24.53889328125L16.817464871625,25.43139328125C16.817015045625,25.560263281250002,16.921116390625,25.66509328125,17.049982390625,25.66554328125L24.933730390625,25.693063281249998C25.062600390625,25.69351328125,25.167430390625,25.58941328125,25.167880390625,25.46054328125L25.171000390625,24.56804328125C25.171450390624997,24.43917328125,25.067340390625,24.33434328125,24.938480390625,24.33389328125L21.934310390625,24.323413281249998L21.941450390625,22.27882328125L24.105620390625,22.28638328125C24.234480390625002,22.28683328125,24.339310390625002,22.18272328125,24.339760390625,22.05386328125L24.342820390625,21.17886328125C24.343270390625,21.04999328125,24.239170390625,20.94516328125,24.110300390625,20.94471328125L21.946130390625,20.93716328125L21.952290390625002,19.17257328125L24.588960390625,19.18178328125C24.717820390625,19.18223328125,24.822660390625,19.07812328125,24.823100390625,18.94926328125L24.826220390625,18.05675828125C24.826670390625,17.92789328125,24.722570390625002,17.82306218125,24.593700390625,17.82261228125L17.593700390625,17.79817776225C17.464835390625,17.79772793625,17.360004390625,17.90182928125,17.359554390625,18.03069528125L17.356439390625,18.92320328125C17.355989390625,19.05206328125,17.460090390625,19.15689328125,17.588956390625,19.15734328125Z" fill-rule="evenodd" fill="#4D5258" fill-opacity="1"/></g></g></svg>
1 import { Logger } from 'wdKit'; 1 import { Logger } from 'wdKit';
2 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel'; 2 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
3 -import { ContentDetailDTO, PhotoListBean } from 'wdBean'; 3 +import { ContentDetailDTO } from 'wdBean';
4 import media from '@ohos.multimedia.media'; 4 import media from '@ohos.multimedia.media';
5 import { OperRowListView } from './view/OperRowListView'; 5 import { OperRowListView } from './view/OperRowListView';
  6 +import { WDPlayerController } from 'wdPlayer';
6 const TAG = 'AudioDetailComponent' 7 const TAG = 'AudioDetailComponent'
  8 +interface Arr{
  9 + image:string,
  10 + title:string
  11 +}
  12 +
7 @Component 13 @Component
8 export struct AudioDetailComponent { 14 export struct AudioDetailComponent {
9 private relId: string = '' 15 private relId: string = ''
10 private contentId: string = '' 16 private contentId: string = ''
11 private relType: string = '' 17 private relType: string = ''
12 - // private avPlayer:media.AVPlayer 18 + private playerController: WDPlayerController = new WDPlayerController();
  19 +
  20 + private arr:Arr[]=[
  21 + {image:'clock',title:'定时'},
  22 + {image:'theOriginal',title:'原文'},
  23 + {image:'list',title:'列表'},
  24 + ]
13 25
14 - @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]  
15 - @State iocClock: string = '定时';  
16 - @State iconTheOriginal: string = '原文';  
17 - @State iconList: string = '列表';  
18 - @State text: string = ''  
19 - @State coverImage:string = 'app.media.audio'  
20 - @State newsTitle:string = '夜读' 26 + @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]//详情
  27 + @State coverImage:string = '' //封面图
  28 + @State newsTitle:string = '' //标题
  29 + @State duration:number = 0 //时长
  30 + @State audioUrl:string = '' //音频路径
  31 + @State outSetValueOne:number = 40 //播放进度
21 32
22 - @State palyIcon:string = "app.media.playicon" 33 + @State @Watch('onIsPlayChanged')isPlay: boolean = true
  34 + onIsPlayChanged(){
  35 + if(this.isPlay){
  36 + console.log('监听播放')
  37 + // this.avPlayer.play()
  38 + }else{
  39 + console.log('监听暂停')
  40 + // this.avPlayer.pause()
  41 + }
  42 + }
23 43
24 - @State showList: boolean = false  
25 - @State outSetValueOne:number = 40  
26 - //  
27 - // @State @Watch('onIsPlayChanged')isPlay: boolean = false  
28 - // onIsPlayChanged(){  
29 - // if(this.isPlay){  
30 - // this.avPlayer.play()  
31 - // this.palyIcon = "app.media.suspend"  
32 - // }else{  
33 - // this.avPlayer.pause()  
34 - // this.palyIcon = "app.media.playicon"  
35 - // }  
36 - // }  
37 - //  
38 async aboutToAppear() { 44 async aboutToAppear() {
39 - this.getContentDetailData()  
40 - // // 创建avPlayer实例对象  
41 - // this.avPlayer = await media.createAVPlayer()  
42 - // // 创建状态机变化回调函数  
43 - // this.setAVPlayerCallback() 45 + await this.getContentDetailData()
  46 + this.playerController.firstPlay(this.audioUrl);
44 } 47 }
45 - //  
46 - // // 注册avplayer回调函数  
47 - // setAVPlayerCallback() {  
48 - // // seek操作结果回调函数  
49 - // this.avPlayer.on('seekDone', (seekDoneTime) => {  
50 - // console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);  
51 - // })  
52 - // // error回调监听函数,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程  
53 - // this.avPlayer.on('error', (err) => {  
54 - // console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);  
55 - // this.avPlayer.reset(); // 调用reset重置资源,触发idle状态  
56 - // })  
57 - // // 状态机变化回调函数  
58 - // this.avPlayer.on('stateChange', async (state, reason) => {  
59 - // switch (state) {  
60 - // case 'idle': // 成功调用reset接口后触发该状态机上报  
61 - // console.info('AVPlayer state idle called.');  
62 - // this.avPlayer.release(); // 调用release接口销毁实例对象  
63 - // this.isPlay = false  
64 - // break;  
65 - // case 'initialized': // avplayer 设置播放源后触发该状态上报  
66 - // console.info('AVPlayerstate initialized called.');  
67 - // this.avPlayer.prepare().then(() => {  
68 - // console.info('AVPlayer prepare succeeded.');  
69 - // })  
70 - // this.isPlay = false  
71 - // break;  
72 - // case 'prepared': // prepare调用成功后上报该状态机  
73 - // console.info('AVPlayer state prepared called.');  
74 - // this.isPlay = false  
75 - // this.avPlayer.play(); // 调用播放接口开始播放  
76 - // break;  
77 - // case 'playing': // play成功调用后触发该状态机上报  
78 - // console.info('AVPlayer state playing called.');  
79 - // this.isPlay = true  
80 - // break;  
81 - // case 'paused': // pause成功调用后触发该状态机上报  
82 - // console.info('AVPlayer state paused called.');  
83 - // this.avPlayer.play(); // 再次播放接口开始播放  
84 - // this.isPlay = false  
85 - // break;  
86 - // case 'completed': // 播放结束后触发该状态机上报  
87 - // console.info('AVPlayer state completed called.');  
88 - // this.avPlayer.stop(); //调用播放结束接口  
89 - // break;  
90 - // case 'stopped': // stop接口成功调用后触发该状态机上报  
91 - // console.info('AVPlayer state stopped called.');  
92 - // this.avPlayer.reset(); // 调用reset接口初始化avplayer状态  
93 - // this.isPlay = false  
94 - // break;  
95 - // case 'released':  
96 - // console.info('AVPlayer state released called.');  
97 - // break;  
98 - // default:  
99 - // console.info('AVPlayer state unknown called.');  
100 - // break;  
101 - // }  
102 - // })  
103 - // }  
104 - // gotoPlay(){  
105 - // this.avPlayer.url = this.contentDetailData[0].audioList[0].audioUrl  
106 - // }  
107 build() { 48 build() {
108 Row() { 49 Row() {
109 Column() { 50 Column() {
110 // 封面 51 // 封面
111 Row() { 52 Row() {
112 - Image($r('app.media.audio')) 53 + Image(this.coverImage)
113 .width(240) 54 .width(240)
114 .height(160) 55 .height(160)
115 .borderRadius('0') 56 .borderRadius('0')
@@ -129,49 +70,21 @@ export struct AudioDetailComponent { @@ -129,49 +70,21 @@ export struct AudioDetailComponent {
129 } 70 }
130 .padding({ left: 34, right: 34 }) 71 .padding({ left: 34, right: 34 })
131 .margin({ top: 32 }) 72 .margin({ top: 32 })
132 -  
133 // 操作矩阵 73 // 操作矩阵
134 Row() { 74 Row() {
135 - // 定时  
136 - Column() {  
137 - Image($r('app.media.clock'))  
138 - .width(28)  
139 - .height(28)  
140 - Text(this.iocClock)  
141 - .fontColor('#fff')  
142 - .fontSize(12)  
143 - .lineHeight(16)  
144 - .margin(2)  
145 - }  
146 -  
147 - // 原文  
148 - Column() {  
149 - Image($r('app.media.theOriginal'))  
150 - .width(28)  
151 - .height(28)  
152 - Text(this.iconTheOriginal)  
153 - .fontColor('#fff')  
154 - .fontSize(12)  
155 - .lineHeight(16)  
156 - .margin(2)  
157 - }  
158 -  
159 - // 列表  
160 - Column() {  
161 - Image($r('app.media.list'))  
162 - .width(28)  
163 - .height(28)  
164 - Text(this.iconList)  
165 - .fontColor('#fff')  
166 - .fontSize(12)  
167 - .lineHeight(16)  
168 - .margin(2)  
169 - }  
170 - .onClick(() => {  
171 - this.showList = !this.showList  
172 - Logger.info(TAG,'这里')  
173 - console.log('列表', this.showList) 75 + ForEach(this.arr,(item:Arr)=>{
  76 + Column() {
  77 + Image(item.image=='clock'?$r('app.media.clock_close'):item.image=='theOriginal'?$r('app.media.theOriginal_close'):item.image=='list'?$r('app.media.list_close'):'')
  78 + .width(28)
  79 + .height(28)
  80 + Text(item.title)
  81 + .fontColor('#4D5258')
  82 + .fontSize(12)
  83 + .lineHeight(16)
  84 + .margin(2)
  85 + }
174 }) 86 })
  87 +
175 } 88 }
176 .width('100%') 89 .width('100%')
177 .padding({ left: 49, right: 49 }) 90 .padding({ left: 49, right: 49 })
@@ -181,61 +94,59 @@ export struct AudioDetailComponent { @@ -181,61 +94,59 @@ export struct AudioDetailComponent {
181 Column(){ 94 Column(){
182 // 进度条 95 // 进度条
183 Row(){ 96 Row(){
184 - Slider({  
185 - value: this.outSetValueOne,  
186 - min: 0,  
187 - max: 100,  
188 - style: SliderStyle.OutSet  
189 - })  
190 - .trackColor('rgba(0,0,0,0.5)')  
191 - .selectedColor('#ED2800')  
192 - .showTips(true)  
193 - .onChange((value: number, mode: SliderChangeMode) => {  
194 - this.outSetValueOne = value  
195 - console.info('value:' + value + 'mode:' + mode.toString())  
196 - }) 97 + Progress({ value: this.outSetValueOne, type: ProgressType.Linear })
  98 + .width('100%')
  99 + .color('#ED2800')
  100 + .backgroundColor('rgba(0,0,0,0.5)')
197 } 101 }
198 .width('100%') 102 .width('100%')
199 .padding({left:24,right:24}) 103 .padding({left:24,right:24})
200 .margin({top:110}) 104 .margin({top:110})
201 // 播放按钮 105 // 播放按钮
202 Row(){ 106 Row(){
203 - Image($r('app.media.loop'))  
204 - .width(24)  
205 - .height(24)  
206 - Image($r('app.media.Backward')) 107 + Column(){
  108 + Image($r('app.media.loop_close'))
  109 + .width(24)
  110 + .height(24)
  111 + Text('循环')
  112 + .fontColor('#4D5258')
  113 + .fontSize(12)
  114 + .lineHeight(16)
  115 + .margin(2)
  116 + }
  117 +
  118 + Image($r('app.media.Backward_close'))
207 .width(24) 119 .width(24)
208 .height(24) 120 .height(24)
209 - Stack(){  
210 - Image($r('app.media.playicon')) 121 + Stack({ alignContent: Alignment.Center }){
  122 + Image(this.isPlay?$r('app.media.suspend'):$r('app.media.playicon'))
211 .width(32) 123 .width(32)
212 .height(32) 124 .height(32)
213 -  
214 } 125 }
215 - .backgroundColor('rgba(255,255,255,0.1)')  
216 - .width(60)  
217 - .height(60) 126 + .padding(28)
  127 + .backgroundColor('#4D5258')
218 .borderRadius(50) 128 .borderRadius(50)
219 - .alignContent(Alignment.Center)  
220 - .onClick(()=>{  
221 - // this.gotoPlay()  
222 - console.log('播放')  
223 - this.getContentDetailData()  
224 - })  
225 -  
226 - Image($r('app.media.fastForward'))  
227 - .width(24)  
228 - .height(24)  
229 - Image($r('app.media.doubleSpeed')) 129 + Image($r('app.media.fastForward_close'))
230 .width(24) 130 .width(24)
231 .height(24) 131 .height(24)
  132 + Column(){
  133 + Image($r('app.media.doubleSpeed_close'))
  134 + .width(24)
  135 + .height(24)
  136 + Text('倍速')
  137 + .fontColor('#4D5258')
  138 + .fontSize(12)
  139 + .lineHeight(16)
  140 + .margin(2)
  141 + }
232 } 142 }
233 .width('100%') 143 .width('100%')
234 .justifyContent(FlexAlign.SpaceBetween) 144 .justifyContent(FlexAlign.SpaceBetween)
235 .margin({top:56}) 145 .margin({top:56})
236 .padding({left:32,right:32}) 146 .padding({left:32,right:32})
237 } 147 }
238 - // OperRowListView() 148 + .layoutWeight(1)
  149 + OperRowListView()
239 } 150 }
240 } 151 }
241 152
@@ -245,15 +156,17 @@ export struct AudioDetailComponent { @@ -245,15 +156,17 @@ export struct AudioDetailComponent {
245 try { 156 try {
246 let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType) 157 let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
247 this.contentDetailData = data; 158 this.contentDetailData = data;
248 - this.coverImage = this.contentDetailData[0].audioList[0].fullColumnImgUrls[0].url 159 + console.log('音乐详情',JSON.stringify(this.contentDetailData))
249 this.newsTitle = this.contentDetailData[0].newsTitle 160 this.newsTitle = this.contentDetailData[0].newsTitle
250 - Logger.info(TAG, `contentDetailData:${JSON.stringify(this.contentDetailData)}`)  
251 - console.log(JSON.stringify(this.contentDetailData))  
252 - console.log(this.newsTitle)  
253 - console.log(this.coverImage)  
254 - 161 + console.log('标题',JSON.stringify(this.newsTitle))
  162 + this.coverImage = this.contentDetailData[0].fullColumnImgUrls[0].url
  163 + console.log('封面图',JSON.stringify(this.coverImage))
  164 + this.duration = this.contentDetailData[0].audioList[0].duration
  165 + console.log('音频时长',JSON.stringify(this.duration))
  166 + this.audioUrl = this.contentDetailData[0].audioList[0].audioUrl
  167 + console.log('音频时长',JSON.stringify(this.audioUrl))
255 } catch (exception) { 168 } catch (exception) {
256 - 169 + console.log('请求失败',JSON.stringify(exception))
257 } 170 }
258 } 171 }
259 } 172 }
@@ -31,5 +31,6 @@ struct AudioDetail { @@ -31,5 +31,6 @@ struct AudioDetail {
31 this.contentId = params?.contentID || ''; 31 this.contentId = params?.contentID || '';
32 Logger.info(TAG, 'aboutToAppear'); 32 Logger.info(TAG, 'aboutToAppear');
33 Logger.info(TAG, 'params', JSON.stringify(params)); 33 Logger.info(TAG, 'params', JSON.stringify(params));
  34 + console.log('参数',JSON.stringify(par))
34 } 35 }
35 } 36 }