마스터Q&A 안드로이드는 안드로이드 개발자들의 질문과 답변을 위한 지식 커뮤니티 사이트입니다. 안드로이드펍에서 운영하고 있습니다. [사용법, 운영진]

안드로이드 웹뷰질문2가지

0 추천

안드로이드 스튜디오에서  https://wavesurfer-js.org/ 라는 라이브러리를 웹뷰를 통해서 

구현을 하고싶은데 파형이 출력이 안됩니다. html에서는 출력확인을 했습니다만 웹뷰에서는 

wavesurfer.js를 불러올수가 없다하여 큰어려움을 겪고있습니다. 이런식으로 웹에서 라이브러리를받아 

웹뷰로 출력할수는 없는것인지 궁금합니다.

<script src="https://unpkg.com/wavesurfer.js"></script>

var wavesurfer = WaveSurfer.create({

       container: '#waveform', 

       waveColor: 'violet', 

       progressColor: 'purple' });

wavesurfer.load('audio.wav');

 

 

'audio.wav' 

audio.wav는 실제로 해당경로를 설정해줘야합니다. assets라는 폴더에 mp3(wav)파일을 넣어두고 file://android_asset/audio.wav를 직접적으로 지정해주면 실제로 파일을 불러올수있는 것인지 궁금합니다.

 

마지막으로.. 아래와같이 이미지일부분, 웹뷰만일부분, 버튼과,텍스트 이런식으로 웹뷰가 출력해주는 

실제사이즈를 조절할수있는지 여부가 궁금합니다. 조그만 힌트나, 답변도 정말 감사히 새겨듣겠습니다.꼭좀 알려주시면 감사하겠습니다.

[ 이미지]

[  웹뷰   ]

[버튼&텍스트]

Earths (120 포인트) 님이 2019년 11월 22일 질문

1개의 답변

0 추천

1. 찾아보니 WaveSurfer는 http or https를 통해서 동작을 하면서도 blob 타입의 데이터를 재생할 수 있네요. 

오디오 파일을 blob 타입(base64 문자열)으로 가지고 있으면 재생이 가능합니다.

ㄱ. php나 다른 방식을 알고 계시면  음성 파일을 base64로 변환하고

ex) php 로 변환할경우에

<?php
$tmp_name = "001z.mp3";
$fp = fopen($tmp_name, 'rb');
$file_content = file_get_contents($tmp_name);
?>

<?= base64_encode($file_content)?>

ㄴ. 문자열을 복사하신 다음. 안드로이드에서  html에서 

<div id="waveform"></div>

<script src="wavesurfer.js"></script>
<script>

var waveSurfer = WaveSurfer.create({

       container: '#waveform',

       waveColor: 'violet',

       progressColor: 'purple' });

//wavesurfer.load('001z.mp3');

var myAudio = "data:audio/x-wav;base64,blob데이터"; // enter complete blob data. I have removed it since it was not allowing to paste me completely
waveSurfer.load(myAudio);
waveSurfer.on('ready', function() {
  waveSurfer.play();
});
</script>

이렇게 하시면 재생가능합니다.

2. LinearLayout으로 weight를 이용하시면 webview를 가변으로 만들어 볼수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:background="#ff00ff"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">
        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <Button
        android:text="버튼"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>
익명사용자 님이 2019년 11월 22일 답변
상세한설명과 정성스러운 답변 정말 감사합니다. 방향성을 잃고있었는데 큰 힘이 될것같습니다. 정말 감사합니다
...