2. 程式人生 > >(13) Nuxt.js寫一個常規音訊的播放元件,動態注入微信,新浪微博的js-sdk

(13) Nuxt.js寫一個常規音訊的播放元件,動態注入微信,新浪微博的js-sdk

阿新 • • 發佈：2019-01-06
export default { props: { userName: { type: String, default: 'Super Hero' }, duration: { type: [String, Number], default: '' }, autoplay: { type: [Boolean, String], default: false }, sourceUrl: { type: String
, default: '' }, coverpic: { type: String, default: '' } }, data() { return { defaultAvatar: require('@/assets/share/[email protected]'), // 預設頭像 audioElm: '', // 音訊播放器 DOM soundCurrentStopTime: ''
, // 當前聲音暫停的時間戳 playState: false, // 播放狀態的圖示控制 timeStepState: '', // 時間迭代 voicePlayMessage: '', // 音訊資源的狀況 currentPlayTime: '00:00', // 當前播放的時間,預設為0 cacheCurrentTime: 0 // 快取播放時間 }; }, computed: { coverUrl() { if (!this.coverpic) { return
this.defaultAvatar; } return this.coverpic; }, voiceTime() { if (this.duration) { return this.second2time(Number(this.duration)); } } }, watch: { sourceUrl(newVal, oldVal) { if (newVal) { this.playAudio(); } } }, created() { this.$store.commit('OPEN_LOADING'); }, beforeMount() { // 初始化音訊播放器 this.initAudioElm(); }, mounted() { // 檢測微博微信平臺 this.checkWeiBo_WeiChat(); this.audioElm.addEventListener('stalled', this.stalled); this.audioElm.addEventListener('loadstart', this.loadstart); this.audioElm.addEventListener('loadeddata', this.loadeddata); this.audioElm.addEventListener('canplay', this.canplay); this.audioElm.addEventListener('ended', this.ended); this.audioElm.addEventListener('pause', this.pause); this.audioElm.addEventListener('timeupdate', this.timeupdate); this.audioElm.addEventListener('error', this.error); this.audioElm.addEventListener('abort', this.abort); }, beforeDestroy() { this.audioElm.removeEventListener('loadstart', this.loadstart); this.audioElm.removeEventListener('stalled', this.stalled); this.audioElm.removeEventListener('canplay', this.canplay); this.audioElm.removeEventListener('timeupdate', this.timeupdate); this.audioElm.removeEventListener('pause', this.pause); this.audioElm.removeEventListener('error', this.error); this.audioElm.removeEventListener('ended', this.ended); }, methods: { initAudioElm() { let audio = new Audio(); audio.autobuffer = true; // 自動快取 audio.preload = 'metadata'; audio.src = this.sourceUrl; audio.load(); this.audioElm = audio; }, checkWeiBo_WeiChat() { let ua = navigator.userAgent.toLowerCase(); // 獲取判斷用的物件 const script = document.createElement('script'); if (/micromessenger/.test(ua)) { // 返回一個獨立的promise script.src = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'; new Promise((resolve, reject) => { let done = false; script.onload = script.onreadystatechange = () => { if ( !done && (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') ) { done = true; // 避免記憶體洩漏 script.onload = script.onreadystatechange = null; resolve(script); } }; script.onerror = reject; document .getElementsByTagName('head')[0] .appendChild(script); }).then(res => { this.initWeixinSource(); }); } if (/WeiBo|weibo/i.test(ua)) { script.src = 'https://tjs.sjs.sinajs.cn/open/thirdpart/js/jsapi/mobile.js'; new Promise((resolve, reject) => { let done = false; script.onload = script.onreadystatechange = () => { if ( !done && (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') ) { done = true; // 避免記憶體洩漏 script.onload = script.onreadystatechange = null; resolve(script); } }; script.onerror = reject; document .getElementsByTagName('head')[0] .appendChild(script); }).then(res => { this.initWeiboSource(); }); } }, canplay() { this.$store.commit('CLOSE_LOADING'); }, initWeixinSource() { wx.config({ // 配置資訊, 即使不正確也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(() => { let st = setTimeout(() => { clearTimeout(st); this.audioElm.load(); }, 50); }); }, initWeiboSource() { window.WeiboJS.init( { appkey: '3779229073', debug: false, timestamp: 1429258653, noncestr: '8505b6ef40', scope: [ 'getNetworkType', 'networkTypeChanged', 'getBrowserInfo', 'checkAvailability', 'setBrowserTitle', 'openMenu', 'setMenuItems', 'menuItemSelected', 'setSharingContent', 'openImage', 'scanQRCode', 'pickImage', 'getLocation', 'pickContact', 'apiFromTheFuture' ] }, ret => { this.audioElm.load(); } ); }, playAudio() { // 播放暫停音訊 if (this.audioElm.readyState > 2) { // 當資源可以播放的時候 if (this.audioElm.paused) { this.cacheCurrentTime === 0 ? (this.audioElm.currentTime = 0) : (this.audioElm.currentTime = this.cacheCurrentTime); this.playState = true; this.audioElm.play(); } else { this.audioElm.pause(); } } }, second2time(currentTime) { // 秒數化為分鐘 let min = Math.floor(currentTime / 60); // 向下取整分鐘 let second = Math.floor(currentTime % 60); // 取模得到剩餘秒數 if (min < 10) { min = '0' + min; } if (second < 10) { second = '0' + second; } return `${min}:${second}`; }, stalled() { // 資源需要快取的時候暫停 this.audioElm.pause(); // 快取載入待播的時候,若是當前播放時間已經走動則觸發播放 if (this.audioElm.currentTime !== 0) { // 判斷當前播放的時間是否到達結束,否則則繼續播放 if (this.audioElm.currentTime !== this.audioElm.duration) { this.playAudio(); } else { this.ended(); } } }, timeupdate() { if ( this.audioElm.readyState > 2 && this.audioElm.currentTime > 0.2 ) { this.cacheCurrentTime = this.audioElm.currentTime; this.currentPlayTime = this.second2time( Number(this.audioElm.currentTime) ); if ( this.audioElm.ended || this.audioElm.currentTime === this.audioElm.duration ) { this.ended(); } } }, ended() { this.audioElm.pause(); // 清除快取的時間 this.cacheCurrentTime = 0; this.voicePlayMessage = ''; }, pause() { // 當音訊/視訊已暫停時 this.playState = false; }, error(err) { // 當在音訊/視訊載入期間發生錯誤時 this.audioElm.pause(); this.voicePlayMessage = '音訊載入資源錯誤!'; console.log('我報錯了:' + err); }, abort() { this.audioElm.pause(); } } };

相關推薦

(13) Nuxt.js寫一個常規音訊的播放元件,動態注入微信,新浪微博的js-sdk

export default { props: { userName: { type: String, default: 'Super Hero' }, duration: { t

新浪微博體驗報告 -- 做一個懂設計的程式設計師

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

仿新浪微博@功能 JS的實現 ——使用JQ At.js 和HTML5 contentEditable

專案需求 增加@功能 先上效果圖 Atwho.js  gitHub地址   https://github.com/ichord/At.js 需要引入的JS：   <script type="text/javascript"

看到很多人都寫的是javascript:void(0);，新浪微博也是，為什麼不能直接寫成javascript:;？

北風網解答： 對於void的說明： void 運算子對任何值返回 undefined。該運算子通常用於避免輸出不應該輸出的值，例如，從 HTML 的 <a> 元素呼叫 JavaScript 函式時。要正確做到這一點，函式不能返回有效值，否則瀏覽器將清空頁面，

用python寫網路爬蟲-爬取新浪微博評論

新浪微博需要登入才能爬取，這裡使用m.weibo.cn這個移動端網站即可實現簡化操作，用這個訪問可以直接得到的微博id。 分析新浪微博的評論獲取方式得知，其採用動態載入。所以使用json模組解析json程式碼 單獨編寫了字元優化函式，解決微博評論中的嘈雜干擾

新浪微博PC端登陸js分析及Python實現微博post登陸

新浪微博的安全級別還是比較高，前端的資訊採用RSA非對稱加密方式，加密的內容處理過，不僅僅是使用者輸入的密碼，加密公鑰是實時請求而來。 首選抓個包瞧瞧： entry:weibogateway:1from:savestate:7qrcode_flag:falseuseticke

Java呼叫 新浪微博API 介面發微博（包含js微博元件、springMVC新浪登入）詳解

參考自：http://www.myexception.cn/program/1930025.html 最近做了一個活動，要用到微博分享，就捉急忙慌的去研究，因為我們公司域名的問題還有專案的問題白白浪費我一天時間。。。 1、js微博元件分享 當然你再配置資訊的

新浪微博一鍵分享手機版JS程式碼

網上有很多新浪微博分享的JS程式碼了，不過都是電腦版的，這在手機上很容易發生頁面的混亂。最近在開發手機軟體，所以就寫了這個手機版的新浪微博分享JS程式碼，如下： //下面這段是生成新浪微博手機版的分享連結和地址 var sinaurl=""; sinaurl+="htt

JS頁面一鍵分享QQ空間、新浪微博、豆瓣等小工具

效果大體如下， 程式碼裡面的js是引用的網路中其他頁面工具js，如果想剔除掉外部依賴，可自己下載，如下幾個url的js檔案，copy到本地修改下即可。 <!DOCTYPE html>

使用weibo js，新浪微博三方登陸，帳號繫結。

    最近在做利用三方資源的東西，由於以往做的是企業管理（ERP）的內網系統，初涉外網資源的網際網路系統摸索了很長時間。     對於網上充斥的各種教程，我真是無力吐槽，我決定把這期間的各種問題以及相應的解決辦法拿出來分享 。教程分為兩個階段：一是賬號登入，二是三方賬號與

原生JS寫一個淡入淡出輪播圖

切換 splay get 自動 sele round pos 鼠標 name 任何網站主頁都離不開一個輪播圖，這是滾動播放新聞或者廣告或者內容的招牌，類型有很多，我們可以做一個淡入淡出的輪播圖。 首先分析，淡入淡出指的是沒有滑動效果，一張圖片消失的時候另一張圖片接著顯示出來

js 寫一個滾動條

兼容 absolut script name padding 位置 當前 sele osi <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

用node.js寫一個jenkins發版指令碼

背景 每次到網頁裡手動發版有點煩，寫個指令碼來提高開發效率。 CFG 在 jenkins 設定裡獲取 API TOKEN。 把 host 和賬號密碼拼接起來就可以通過鑑權。 const token = { user: '', password: '', } const host = 'jen

用js寫一個秒錶

首先，先鋪好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input onclick="ks()" type="button" name="" id="kaishi" value

用js寫一個秒表

tel 我們 java name func 取余 NPU 定時器1 cli 首先，先鋪好格式 <input type="text" name="" id="shuzi" value="00:00:00" /><br /> <input o

JS寫一個最簡單的無縫輪播圖

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

利用vue.js寫一個購物車結算

利用vue.js寫一個購物車結算 筆者自學前端兩個月了，之前什麼輪播圖，自動載入的功能，寫了就忘了，還是太菜了。於是想開個部落格來記錄一下自己學習的歷程。第一篇，獻給這個購物車。大概下面那個效果把。 先搭建一個html結構。第一個匯入的js庫即vue

JS寫一個方法，傳入一個數組，返回該陣列的層深

現在我們有一個多維陣列，我們想得到該陣列的層深，即最大維度 如：var arr = [1, [4,[5,6,[7]]], [2,3]] = 0；返回4；那麼我們該怎麼做呢？ 核心思想：遞迴，迴圈遍歷 // 這裡傳入兩個引數 // 引數一為陣列 // 引數二為初始陣列的層深 function fo(

前端與編譯原理——用JS寫一個JS直譯器

說起編譯原理，印象往往只停留在本科時那些枯燥的課程和晦澀的概念。作為前端開發者，編譯原理似乎離我們很遠，對它的理解很可能僅僅侷限於“抽象語法樹（AST）”。但這僅僅是個開頭而已。編譯原理的使用，甚至能讓我們利用JS直接寫一個能執行JS程式碼的直譯器。 專案地址： https:/

使用Node.js寫一個簡單的api介面

引入Http模組 預設你已經安裝了Node.js Node當中內建了Http模組； 可以使用 var http= require("http"); 複製程式碼 引入http模組； Hello world 用Node.js實現一個HTTP伺服器程式非常簡單。我們實現一個最簡單的Web程式， 它對於所有請